Vue：无法在输入 vue-router 之前访问 Pinia Store

Question

我正在使用 Vue 3，包括 Composition API，另外还使用 Pinia 作为状态管理。

在选项 API 中，有一个方法 beforeRouteEnter，该方法内置于组件本身中。不幸的是，这个方法在组合 API 中不存在。这里，本来应该在 beforeRouteEnter 方法中的代码被直接写入 setup 方法中。但是，这意味着首先加载并显示组件，然后执行代码，如果检查失败，则组件将被重定向到错误页面等。

我的想法是直接在路由的 beforeEnter 方法中的路由配置中进行检查。但是，我无法访问 Pinia Store，尽管它之前在 main.js 中调用过，但它似乎尚未初始化。

控制台日志

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.

路由器.js

import { useProcessStore } from "@/store/process";

const routes: Array<RouteRecordRaw> = [
{
    path: "/processes/:id",
    name: "ProcessView",
    component: loadView("ProcessView", "processes/"),
    beforeEnter: () => {
      const processStore = useProcessStore();
      console.log(processStore);
    },
    children: [
      {
        path: "steer",
        name: "ProcessSteer",
        component: loadView("ProcessSteer", "processes/")
      },
      {
        path: "approve/:code",
        name: "ProcessApprove",
        component: loadView("ProcessApprove", "processes/")
      }
    ]
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

main.js

import { createApp } from "vue";
import "@/assets/bundle-bootstrap.css";
import App from "@/App.vue";
import { createPinia } from "pinia";
import router from "@/router";
import SvgIcon from "@/components/SvgIcon.vue";

const pinia = createPinia();
const app = createApp(App);

app.use(pinia);
app.use(router);
app.component("SvgIcon", SvgIcon);

router.isReady().then(() => {
  app.mount("#app");
});

Answer 1

但是，我无法访问 Pinia Store，尽管它之前在 main.js 中调用过，但它似乎尚未初始化

在什么之前？Pinia 实例是在模块导入const pinia = createPinia(); 后创建的router- 导入时，所有副作用（包括调用）createRouter()都会被执行。一旦创建了路由器，它就会开始它的初始导航（在客户端 - 在服务器上，您需要使用 触发它router.push()） - 如果您碰巧位于与使用 Pinia 存储的守卫的路由匹配的 URL，则会useProcessStore()在创建 Pinia 之前发生。 。

在组件外部使用存储

您有两个选择：

• 要么确保在创建 Pinia ( ) 并安装 ( )之后useXXXStore()发生任何调用createPinia()app.use(pinia)
• 或者将 Pinia 实例传递到useXXXStore()组件的任何外部......

// store.js
import { createPinia } from "pinia";

const pinia = createPinia();

export default pinia;

// router.js
import pinia from "@/store.js";
import { useProcessStore } from "@/store/process";

const routes: Array<RouteRecordRaw> = [
{
    path: "/processes/:id",
    name: "ProcessView",
    component: loadView("ProcessView", "processes/"),
    beforeEnter: () => {
      const processStore = useProcessStore(pinia ); // <-- passing Pinia instance directly
      console.log(processStore);
    },
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

// main.js
import { createApp } from "vue";
import App from "@/App.vue";
import store from "@/store.js";
import router from "@/router";

const app = createApp(App);

app.use(store);
app.use(router);

router.isReady().then(() => {
  app.mount("#app");
});

Answer 2

希望这会有所帮助。Vue 为我们需要存储的一些功能（在组件之外）提供支持。

为了解决这个问题，我只是useStore()在 Vue(beforeEach) 提供的函数内部调用了该函数，它就工作了。

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

例子 ：

import { useAuthStore } from "@/stores/auth";
.
.
.
.
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

router.beforeEach(async (to, from) => {
  const authStore = useAuthStore();

  // use authStore Here
});