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

【问题标题】：Vue 3 access to app level provided instances from vue-routerVue 3 从 vue-router 访问应用程序级别提供的实例
【发布时间】：2021-07-20 11:30:17
【问题描述】：

我想在 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 引导程序中使用时提供的。但是两个 use 函数都返回 undefined，我猜这个范围内的注入会搜索不存在应用程序级提供的实例的不同位置。
那么如何将它们注入到路由器文件中，或者换句话说，如何在此处使用 useStore 和 usePuex 获取 store 和 puex 实例？

【问题讨论】：

标签： vue.js vue-router vuejs3 vue-composition-api

【解决方案1】：

我已经根据question 找到了一种方法，但我仍然不知道它是否是最好的解决方案。我可以从 main.js 文件导出应用程序实例，然后改用 app.$store 和 app.$puex。虽然可行，但我仍然在想一个更好的解决方案，使用 use 函数 (inject) 注入 store 和 puex 实例。

【讨论】：