'Add new root base definition for Pinia

I have added axios to my Pinia store in a Quasar's boot file

export default boot(async ({ app, store, ssrContext, router }) => {
  const api = axios.create({
    baseURL: import.meta.env.VITE_APP_API_BASE_URL,
    paramsSerializer: serializeParameters,
  });

  store.use(() => ({ api }));
  }
});

Now I would like to augment my Pinia store to be able to use this.api inside my actions. I have tried using all examples in the docs

import 'pinia'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    api: AxiosInstance;
  }
}

export const useGroupStore = defineStore('groups', {
  actions: {
    getGroups() {
       this.api <-- it is giving me undefined (or any)
    }
  }
})

How can I augment my store to be able to use this.api inside my actions?

vue.jsquasarpinia


Solution 1:[1]

In your boot file, you need to assign the API to the pinia store reference via an argument that is available in the pinia plugin method. Try this

store.use(({ store }) => {
  store.api = yourApi
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 akapurdy

Related Questions