Vue 在路由器文件中访问 Vuex 存储答案

【问题标题】：Vue accessing Vuex store in router fileVue 在路由器文件中访问 Vuex 存储
【发布时间】：2021-08-10 11:38:28
【问题描述】：

我正在尝试按如下方式访问我在路由器文件中的商店，但它不起作用。当我安慰时给我未定义。有什么建议吗？我正在使用 Vue 3。提前谢谢！


import store from '../store/index'


const preventRoutes = {
  beforeEach: (to, from, next) => {
    console.log(store.getters.getLoginState);
    if (store.getters.getLoginState === "true") {
      console.log("i reached if")
      next();
    } else {
      console.log("i reached else")
      next("/");
    }

  }

}

【问题讨论】：

您是否在此文件中导入商店？
是的。我做到了。也试过 $store.xxxx。
请为您的问题提供stackoverflow.com/help/mcve。 store 应该被导入，这是在组件之外使用它的方式。如果在 beforeEach 运行时它没有被初始化，那就是你这边的问题。如果路由器和存储模块具有循环依赖关系，就会出现这种情况
感谢埃斯图斯。我保证，商店是进口的。我编辑了上面的代码来澄清。没有错误可以分享。它只是 nt 正常工作，当我登录控制台时，我明白它是未定义的。另外，商店里的任何东西都是不确定的。所以我确信商店没有被正确读取。非常感谢您的支持！

标签： vue.js vue-router store

【解决方案1】：

可能是因为在导入之前加载了之前的路由尝试直接从之前的路由导入：

router.beforeEach(function (...) {
      const store = require('./store')
      store.blah...
    })

【讨论】：