How to use custom properties added to a store?

[djeikyb]

How are you supposed to use the custom properties you add to a store? I get runtime errors saying..

"undefined is not an object" when I do like

export const useSomeStore = defineStore("some", () => {
   await this.$axios.get()
})

and "can't find variable $axios" when I do like this:

export const useSomeStore = defineStore("some", () => {
   await $axios.get()
})

Here's a /plugins/axios.ts to add a configured $axios to vue as a global property:

import { App } from "vue";
import axios from "axios";

export default {
  install: (app: App, baseUrl: string) => {
    app.config.globalProperties.$axios = axios.create({
      baseURL: baseUrl,
    });
  },
};

Then in my main.ts:

import {
  createApp,
  markRaw,
} from "vue";
import axios from "./plugins/axios";
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp(App);
app.use(axios, "http://localhost:8080");
pinia.use((context) => {
  context.store.$axios = markRaw(app.config.globalProperties.$axios);
});
app.use(pinia);