How to access Pinia outside of Vue component, in Vue app

[iknowmagic]

I am using Pinia in a Vue app and now I need to access a Pinia store from within an Axios interceptor; a standalone TypeScript file, effectively outside of the normal Vue flow; outside of a component.

import App from '@/App.vue' is in main.ts, in Vue, as expected.

And now am I supposed to import App from '@/App.vue' yet again, to use a Pinia store outside of a component, as per Pinia's documentation?

The App.vue calls several APIs to initialize the Vue app. It does not seem to make sense to import App.vue again, outside of main.ts.

Any ideas as to how to access the same store in a Vue component and at the same time, access (and modify) such store from within a TypeScript file?

Many thanks.

[BenShelton]

No you do not import the App again. You would simply import the store you want to use with something like import { useCounterStore } from '@/stores/counter' and then call const counterStore = useCounterStore() WITHIN the interceptor (of course, replace with the actual name of your store).

You can then change the state, call actions etc. from within the interceptor. It's important you call the store within the interceptor because if you do it outside then Pinia may not have initialised yet and you will get a console warning/error.

This is all well documented at https://pinia.esm.dev/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component

[iknowmagic]

Thanks @BenShelton
That's exactly what I tried to do.

However, I get an error asking if I forgot to install pinia.

import { loadingProgress } from '@/store' // I do not call it useLoadingProgress, but it's the same idea
const loadingProgressStore = loadingProgress()

Right there in the documentation that you suggested, it is said that one must import the App.vue first.

That's what I am trying to avoid.

Thoughts?

Many thanks.

[BenShelton]

Did you register Pinia in your main.ts file as well? These 3 lines need to be in that file too:

// main.ts Vue3
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

Or if you're using Vue2 + composition-api:

// main.ts Vue2
import { PiniaPlugin, createPinia } from 'pinia'
import App from './App.vue'

Vue.use(PiniaPlugin)
const pinia = createPinia()
new Vue({
  pinia,
  render: h => h(App),
  // all your other options here
}).$mount('#app')

You only need to create and register pinia once for your application which would happen in your main.ts or whatever your entrypoint file is called. After that to use an individual store you only need to import the store, you do not need to import createPinia or your App.vue elsewhere. So for example your complete interceptor file would look something like:

// interceptors.ts
import axios from 'axios'
import { useAuthStore } from '@/stores/auth'

axios.interceptors.request.use(request => {
  const authStore = useAuthStore() // must be within the interceptor!
  // example of pulling an auth token from the store
  request.headers.Authorization = authStore.authToken
})

[iknowmagic]

@BenShelton

I am sorry, I do not think that the problem that I have is being understood.

I have a Vue 3 app and yes, in the Vue app, in the main.ts pinia is being wired as per the documentation and it works fine.

Now, I am using axios and I have an axios interceptor, which is a JavaScript file (TypeScript but it does not matter for the problem that I am having) that does not go through the main.ts file in Vue; it is just a standalone file that is being imported at some point. The interceptor needs to read a value from a pinia store, that in turn injects some header into an axios instance, necessary to make API calls.

App.vue makes initial API calls that retrieve necessary data and store it in pinia, such data is necessary to make further API calls (CRSF token, user permissions, etc.)
...
...
axios instance <-- axios interceptor <-- pinia store
...
...
Vue components import axios instance to make API calls
...

Long story short, I have a JavaScript file that needs to retrieve a value from a pinia store outside of a Vue instance. I could do this very easily with Vuex, but now it seems that in order to use a pinia store, one must import the whole App.vue first, which I cannot do, because that would mean initializing the Vue app twice, once in the main.ts and another time in the above-mentioned JavaScript file.

[BenShelton]

What you are describing sounds correct, if Pinia is being initialised and then you import the store (not the App) in the interceptor file it should work.

Here is a working example: https://codesandbox.io/s/pinia-vue-3-axios-interceptor-6jf11
Look in particular at main.js and api/axios.js, the console output will show you the fake token being added.

Are you able to post the relevant parts of your code or even better a Minimum Reproducible Example of the problem? You can use the above as a template.

[iknowmagic]

@BenShelton

Thank you so much for your help.

I noticed what the problem was. Previously I was importing the store outside of the interceptor. When I switched to pinia, I just changed the same line to use pinia, not understanding the fact that pinia needed to be initialized first, as you said.

I very much appreciate your time to help on the matter. Switching from Vuex requires a few slight changes in the way things are imported. I really like pinia's simplicity and ease of use :)

[BenShelton]

Thanks, I’m glad you’ve managed to find a solution. This is a common gotcha.

Would you mind marking my other answer as the correct answer to this question so that others can benefit too if they run into similar problems? Thanks.

[sheldonstewart]

THANK YOU SO MUCH YOU GUYS

[sheldonstewart]

Actually it's iKnowMagic's reply on Sept 25 that was the solution for me

[sarkanyszilard]

@BenShelton @iknowmagic Thank you!