Pass axios instance to the store and reach it (typescript)

[sphex813]

Hello, how can I reach passed axios instance in the defineStore when using arrow function?

This is how I am creating Pinia Plugin with value axios where I am passing axiosInstance.

const axiosInstance = axios.create();

const pinia = createPinia();
pinia.use(({ store }) => {
  store.axios = markRaw(axiosInstance);
});
app.use(pinia);

arrow function

export const useUserStore = defineStore("userStore", () => {
  const user: Ref<IUser | null> = ref(null);

  const axios = this.axios; //Object is possibly 'undefined'.
}

normal function but still getting the error

export const useUserStore = defineStore("userStore", function () {
  const user: Ref<IUser | null> = ref(null);

  const axios = this.axios; //'this' implicitly has type 'any' because it does not have a type annotation.
}

[franzos]

I would also like to know how-to accomplish this. Here's an earlier, related discussion:

• Accessing injected dependency from pinia plugin in setup function #1611.
• probably too: How we can access store instance in setup store #1745

Ultimately this seems to boil down to option vs setup store.

// Working
export const test = defineStore({
    id: 'reg',
    actions: {
        async some() {
            return this.post('/abc', { name: 'Mike' })
        }
    }
})

// Not working
// 'this' implicitly has type 'any' because it does not have a type annotation.
export const test = defineStore('reg', function () {
    function some() {
        return this.post('/abc', { name: 'Mike' })
    }
})

[manakuro]

You can specify the this parameter like so:

export const test = defineStore('reg', function () {
    function some(this: any) {
        return this.post('/abc', { name: 'Mike' })
    }
})

[tommie]

See https://pinia.vuejs.org/core-concepts/plugins.html#Typing-new-store-properties on how to add a type declaration for plugins injecting state.