Vue项目中Router内Pinia未初始化问题求助

问题根源 #

你在Router文件的顶层作用域直接调用useUserStore()，而模块导入是静态执行的——此时Pinia还没通过app.use(pinia)完成初始化，自然找不到活跃的Pinia实例，触发getActivePinia was called with no active Pinia错误。调整main.js的导入顺序没用，因为Router模块的顶层代码在Pinia创建前就已经执行了。

解决方案 #

1. 把Store调用移到路由守卫回调内部 #

不要在Router文件的顶层调用useUserStore，而是放到beforeEach/beforeResolve等路由守卫的回调函数里——这些回调是在Pinia初始化完成后才会触发的。

示例代码：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// 只导入useUserStore，不要立刻调用
import { useUserStore } from '@/stores/user'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/dashboard',
      name: 'dashboard',
      component: () => import('../views/Dashboard.vue'),
      meta: { requireAuth: true } // 需要鉴权的路由标记
    },
    // 其他路由配置...
  ]
})

router.beforeEach((to, from, next) => {
  // 在这里调用useUserStore，此时Pinia已经初始化完成
  const userStore = useUserStore()
  
  // 鉴权逻辑示例
  if (to.meta.requireAuth && !userStore.isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

export default router

2. 确保main.js的初始化顺序正确 #

必须先挂载Pinia，再挂载Router，最后挂载app：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

// 第一步：创建并挂载Pinia
const pinia = createPinia()
app.use(pinia)

// 第二步：挂载Router
app.use(router)

// 第三步：挂载应用
app.mount('#app')

额外注意 #

所有需要访问Pinia Store的代码，都要放在组件setup函数内、路由守卫回调、或者Pinia初始化后的异步逻辑中，绝对不能在模块的顶层作用域直接调用useStore系列方法——这是Pinia的核心规则之一。

内容的提问来源于stack exchange，提问作者DMantas