Can not use store in router.beforeEach

[rhinonan]

Reproduction

vue: 2.6.14
vue-router: 3.5.2
pinia: 2.0.0-rc.13
@vue/composition-api : 1.2.4
vite : 2.5.6

// app.ts
import router from '@/router'
function initApp() {
    Vue.use(VueCompositionAPI);
    Vue.use(PiniaVuePlugin);
    const pinia = createPinia();
    const app = new Vue({
        pinia,
        router,
        i18nIntl,
        render: (h: CreateElement) => h(App),
    });
    app.$mount('#app');
}

export function createRouter() {
    // init
    let router: VueRouter = new VueRouter({
        routes: [{
            path: '/',
            component: () => import('@/views/index/index.vue')
        }], // 
    });
    router.beforeEach((to, from, next) => {
        const axiosStore = useAxiosStore();
        const authStore = useAuthStore();
    });
    return router;
}
export default createRouter();

Expected behavior

I could use store as document

Actual behavior

I got an error

vue-router.esm.js:16 [vue-router] uncaught error during route navigation:
vue-router.esm.js:2314 Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?

if i remove it from router.beforeEach, it works with vue files.

Additional information

I notice from and to is same(path and fullpath both was '/') at the first beforeEach.

and page was render

[rhinonan]

pinia was use getCurrentInstance(@vue/composition-api) to get vm;

I had tried use getCurrentInstance in router.breforeEach and got null....

[wangfengyuan]

also, i want to use like this when define routes in vue-router , it's also failed

import { useUserStore } from '@src/store/userInfo';
const userStore = useUserStore();
const Home = () => import('../pages/home/Home.vue');


const routes = [
  {
    path: '/:from/home',
    name: 'home',
    component: Home,
    meta: {
       reportPageName: userStore.userInfo ? 'vip': 'notvip'
    }
  },
]

[posva]

That's actually explained in docs, you can't call useUseStore() everywhere

[wangfengyuan]

yes, i saw it, ok, I will make some change to achieve it

[floydjones1]

I really want to use pinia store inside beforeEach. Is there any solution?

[floydjones1]

It was working before, not in pinia 2

[indyzz]

There's an example under the "Stores outside of components"-section in the docs, check out the second example

https://pinia.esm.dev/core-concepts/outside-component-usage.html

[indyzz]

I'm pretty sure that the problem you're running into is that when you export the function as

export default createRouter();

The function will run on import and since this happens before the Pinia instance has been created it won't work. The second example o n the "Stores outside of components"-section have an example of a structure that might work better

https://pinia.esm.dev/core-concepts/outside-component-usage.html#single-page-applications

[ozanmuyes]

The link is so descriptive, and it seems I overlooked it. Thanks for filtering the documentation out and sharing the link.

[sylvainpolletvillard]

I met the same issue on a Vue 2 project with @vue/cli and vue-router v3 setup, and a router/index.js exporting directly the router instance.

The solution for me has been to call Vue.use(Router) after Vue.use(PiniaVuePlugin). It's okay if the router instance is declared before createPinia, provided that you attach Pinia plugin before Router plugin:

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
import Router from "vue-router";

import router from "./router"; // <--- export default new Router(...)

import App from './App.vue'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

Vue.use(Router) // <--- MUST BE AFTER Vue.use(PiniaVuePlugin)

new Vue({
  render: h => h(App),
  pinia,
  router
}).$mount('#app')

[sylvainpolletvillard]

Well I'm not sure what you are looking for, my router definition is very classic, basically what I put in comment: export default new Router({ routes }) and is generated by default when creating a Vue 2 project with Vue-router and Vue CLI. I'm not using anything related to pinia inside my router configuration ; maybe you are ?

[llbarr1]

Indeed I was trying to access a Pinia state, but ended up reconfiguring things a bit to achieve the same functionality. This behavior doesn't seem to happen with Vue 3 + Pinia tho (thankfully).

[legend0858]

It can be done, thank you very much

[rachitpant]

Thank you .. this helped .. there were two more changes for me in order to get it working. Removed Vue.use(Router) within the router file.( since thats done here) and second change was calling useUseStore() at the top of router file , it has to be called within route guard as explained in a comment in wangfengyuans post in this thread.

[dudintv]

It helped me! Thanks!

[Robperkstar]

I had this issue as well with Vue 2. The problem seems to be the way Vue is built in Vue 2 compared to vue 3, so the router will be evalutated before the pinia store has been added to the instance.

I solved it by allowing the pinia store to be exported from main.js:

//main.js
export const pinia = createPinia()

then in router index.js I imported this along with the store I needed:

import { pinia } from '@/main'
import { useUserStore } from '@/store/user'

then used it in the routerguard like this:

router.beforeEach(async (to, _, next) => {
    const userStore = useUserStore(pinia)
}

And I could use the store with no issues.

[devemrekaratas]

I was facing the same problem, solved it thank you!

[do-adams]

This solves the (strange) issue with global router .beforeEach() guards in Vue 2.7. Glad we can use an SSR approach for this. Thanks!

[iwusong]

I think this is the best answer