Vue 3 从 vue-router 访问应用程序级别提供的实例

Question

我想在Vue 3的vue-router中写一些复杂的保护逻辑来保护根据store和我提供的其他模块进入一些路由。例如，我想检查用户个人资料信息是否存在：

router.afterEach((to, from) => {
    console.log('store: ', useStore());
    const puex = usePuex();
    puex.isReady().then(() => {
        const me = puex.me.compute();
        watch(me, (...params) => console.log('router: ', ...params));
    });
});

在上面的代码中，useStore 和 usePuex 都尝试从 Vue 应用程序中注入 store 和 puex 实例，这些实例在 main.js bootstrap 中使用时提供。但是两者都使用函数 return undefined 并且我猜这个范围内的注入搜索了一个不同的地方，在这个地方应用级提供的实例不存在。
那么我怎样才能将它们注入路由器文件，或者换句话说，我怎样才能在这里使用 useStore 和 usePuex 获取商店和 puex 实例？

Answer 1

我已经找到了一种方法但我仍然不知道它是否是最好的解决方案。我可以从 main.js 文件导出应用程序实例，然后改用 app.$store 和 app.$puex。虽然它有效，但我仍然在考虑使用使用函数（注入）注入商店和 puex 实例的更好解决方案。

Vue 3 从 vue-router 访问应用程序级别提供的实例

Vue 3 access to app level provided instances from vue-router

vue.js

vue-router

vuejs3

vue-composition-api