Vue 2项目中无法在beforeEach路由守卫访问Pinia Store

问题分析 #

你遇到的错误核心是：在组件外（路由守卫）调用Pinia的useStore函数时，既没有正确传入Pinia实例，还存在main.js与router的循环依赖问题，导致Pinia无法被识别为活跃状态。

解决方案 #

1. 抽离Pinia实例到单独文件 #

避免main.js和router之间的循环依赖，创建src/stores/pinia.js：

import Vue from "vue";
import { createPinia, PiniaVuePlugin } from "pinia";
import VueCompositionAPI from "@vue/composition-api";

Vue.use(VueCompositionAPI);
Vue.use(PiniaVuePlugin);

const pinia = createPinia();

export default pinia;

2. 修改main.js引入抽离的Pinia实例 #

import Vue from "vue";
import App from "./App.vue";
import pinia from "./stores/pinia";
import router from "./router";

Vue.config.productionTip = false;

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

3. 在路由守卫中显式传入Pinia实例 #

修改src/router/index.js：

import VueRouter from "vue-router";
// ...保留原有组件导入
import pinia from '@/stores/pinia';
import { useAppStore } from '@/stores/AppStore';

Vue.use(VueRouter);

// ...保留原有路由定义

const router = new VueRouter({
  base: "/",
  mode: "history",
  routes,
});

router.beforeEach(() => {
  // 显式传入Pinia实例
  const store = useAppStore(pinia);
  console.log(store.counts);
});

export default router;

关键说明 #

• 组件内的Pinia实例是通过Vue上下文自动注入的，但组件外没有这个上下文，因此必须显式传入Pinia实例才能调用useStore。
• 将Pinia实例抽离到单独文件，彻底解决了main.js与router的循环依赖问题，确保路由守卫执行时Pinia实例已被正确创建并可用。

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