Vue 3从vue路由器访问应用程序级别提供的示例

l5tcr1uw 于 2022-12-30 发布在 Vue.js

关注(0)|答案(2)|浏览(138)

我想在Vue 3中的vue-router中编写一些复杂的保护逻辑，以根据商店和我提供的其他模块保护进入一些路线。例如，我想检查用户配置文件信息是否存在：

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 中使用时提供的。但是两个use函数都返回undefined，我猜这个作用域中的注入会搜索一个不同的地方，那里不存在应用级提供的示例。
那么我如何将它们注入到路由器文件中，或者换句话说，我如何使用useStore和usePuex获得store和puex示例？

vue.js

来源：https://stackoverflow.com/questions/67277688/vue-3-access-to-app-level-provided-instances-from-vue-router

2条答案

按热度按时间

gab6jxml1#

根据question，我找到了一个方法，但我仍然不知道这是否是最好的解决方案。我可以从main.js文件中导出应用示例，然后使用app.$store和app.$puex代替。虽然它工作，但我仍然认为使用use函数（inject）注入存储和puex示例是更好的解决方案。

赞(0）回复(0）举报 2022-12-30

hk8txs482#

在main.js/ts中挂载应用后，您仍然可以添加导航保护，代码如下所示：

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const vm = createApp(App)
  .use(puex)
  .use(router)
  .mount('#app');

router.afterEach((to, from) => {
  const me = vm.puex.me.compute();
  watch(me, (...params) => console.log('router: ', ...params));
});

你仍然可以exportvm，到import它在路由器文件中，并使用它同样的方式，但我真的觉得有点混乱，因为main.js/ts已经导入路由器文件。

赞(0）回复(0）举报 2022-12-30

我来回答

Vue 3从vue路由器访问应用程序级别提供的示例

2条答案

相关问题

热门标签

最新问答