Can't access pinia in router.js file (or other util js files)

[Sovai]

I can access pinia if I define the route in main.js but I cannot access it if I call it in a separate router.js file.

my main .js

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { loadAllPlugins } from './plugins'
...
const app = createApp(App)
loadAllPlugins(app).then(() => app.use(router).mount('#app'))

My load all plugins file

// plugins/index.js
export function loadAllPlugins(app) {
  return new Promise((resolve) => {
    // register all files in plugins directory
    const files = require.context('.', true, /\.js$/)
    files.keys().forEach((key) => {
      if (typeof files(key).default === 'function') {
        if (key !== './index.js') files(key).default(app)
      }
    })
    resolve()
  })
}

// plugins/pinia.js
import { createPinia } from 'pinia'
const $fetch = ...
export default function loadPlugin(app) {
  const pinia = createPinia()
  // register fetch to pinia
  pinia.use(({ store }) => {
    store.$fetch = $fetch
  })
  app.use(pinia)
}

as you can see, I waited for all the plugins to load before calling app.use(router) in main.js which I think pinia already available but when I call it in router.js file, it throws me this error

// store/index.js
import { defineStore } from 'pinia'
export const useStore = defineStore({
  id: 'store',
  state: () => ({
    mainFilter: CONST.SPENDING,
})
...
})

// router.js
import { createWebHistory, createRouter } from 'vue-router'
import { useStore } from '../store'
const store = useStore()
const routes = [
  {
    path: '/',
    name: 'Statistics',
    component: () => import('@/pages/HomePage'),
    meta: { filter: store.mainFilter }, // <=== call state here throw error
  }]
const router = createRouter({
  history: createWebHistory('/#/'),
  routes,
})

export default router

Here is what the error says

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
	const pinia = createPinia()
	app.use(pinia)
This will fail in production.

This not only happen in router.js file but to any helper file I called

[xt-crew]

i am facing the same issue did you find something please

[Sovai]

declare the pinia store constance inside a function so every time it is called, it will get the updated state.

here's an example

// utils.js
import { useUser } from "../store/user.js"
const user = useUser() // <=== Here will be Uncaught Error: [🍍]...
export const getUserFullName = () => {
    return user.firstName + " " + user.lastName
}

to fix that, declare scoped user variable

// utils.js
import { useUser } from "../store/user.js"
export const getUserFullName = () => {
    const user = useUser() // <=== no error
    return user.firstName + " " + user.lastName
}

hope this solve ur issue

[posva]

See https://pinia.vuejs.org/cookbook/migration-vuex.html#Usage-Outside-Components

[xt-crew]

thanks but i need something like i am using pinia store in js file instead of .vue file and while creating app js files are being called without waiting for pinia store then how can i make js to wait for pinia store to be created

[danigracia13]

did you find a solution?