A confusion about using pinia in the Vue project

[luffywz]

In my Vue project, I use the permission.js file for permission control
In the main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './stores'
import './permission'
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

In the stores/index.js

import { createPinia } from 'pinia'
const store = createPinia()
export default store

And in the permission.js

import router from './router'
import userStore from '@/stores/modules/user'
// const userStore = userPinia()
router.beforeEach(async (to, from, next) => {
    if (!userStore().getUserCode) {
        await userStore().actUserInfo()
    }
    next()
})

It's confusing that if I use 'const userStore=userPinia()' in my permission.js, I will report an error 'getActivePinia was called with no active Pinia.' Did you forget to install pinia? But if I annotate this line of code and use userPinia(), there's no problem

[ramsesmoreno]

Hi!

The call to the composable const userStore = userPinia() should be done after Pinia is created. Having this in the root of permissions.js can't ensure that it will be called after the createPinia() is called. You can move the code to inside the beforeEach function, when you are sure Pinia is installed.

This specific example is explained in the Pinia Guide:

https://pinia.vuejs.org/core-concepts/outside-component-usage.html