Vue.js 从VueRouter.beforeach（）访问Vuex时存储未定义

我正在尝试访问Vuex存储，如本文所示：

我已经浪费了一个早上在一个简单的打字错误上，但我没有意识到。在beforeach（）=>{}体中，我得到“存储未定义”

我正在使用LoginForm组件中的存储，它似乎就在那里。chrome调试器中的Vuex选项卡显示我期望的存储内容。我在做什么

从关键代码中剪切粘贴：

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginForm from '@/components/LoginForm'
import HomePage from '@/components/HomePage'
import store from '@/store'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/login',
            component: LoginForm
        },
        {
            path: '/home',
            component: HomePage,
            meta: {requiresAuth: true}
        }
    ]
})

router.beforeEach((to, from, next) => {
    // store is undefined here
    const IsAuthenticated = store.getters.IsAuthenticated()
    if (to.matched.some(record => record.meta.requiresAuth) && !IsAuthenticated) {
        next({path: '/login', query: { redirect: to.fullPath }})
    } else {
        next()
    }
})

export default router

编辑：从商店导出似乎正常。通过保留对导入存储的本地引用并引用该引用，它可以正常工作。在我使用beforeach（）时似乎与上下文有关

---

我有一个非常相似的代码，唯一相关的区别似乎是我在router/index.js中以以下方式导入存储：

import store from '@/store/index';

我的整个router.js是：

import Vue from 'vue';
import Router from 'vue-router';
import ProjectPage from '@/pages/ProjectPage';
import store from '@/store/index';


Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'ProjectPage',
      component: ProjectPage,
    },
  ],
});

router.beforeEach((to, from, next) => {
  // store is defined here
  console.log(store);
  debugger;
});


export default router;

---

这是一次最盛大的追尾演习。问题是我的getter没有被称为“IsAuthenticated”（它也不是一个函数）。我任由自己被调试器欺骗。将所有代码还原回原始帖子并将getter调用更改为

正确

const IsAuthenticated = store.getters.isAuthenticated

const IsAuthenticated = store.getters.IsAuthenticated()

不正确

const IsAuthenticated = store.getters.isAuthenticated

const IsAuthenticated = store.getters.IsAuthenticated()

---

在Chrome中，将断点放在代码行上，并尝试通过将鼠标悬停在代码上来检查“isAuthenticated”，会产生原始的指定行为，即使代码行的计算结果很好。

我也有类似的情况。关于我的情况：

• 我有存储模块。因此，在

  /store/index.js

• 在router

  /router/index.js

  上，我导入存储
• 然后使用存储getter在路由器上工作良好

store/index.js

...
import auth from './modules/auth'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
})

...
import store from '../store/index.js'
...
router.beforeEach(async (to, from, next) => {
  console.log(store.getters['auth/isAuthenticated'])
  next()
})

路由器/index.js

...
import auth from './modules/auth'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
})

...
import store from '../store/index.js'
...
router.beforeEach(async (to, from, next) => {
  console.log(store.getters['auth/isAuthenticated'])
  next()
})

---

非常感谢。注释//store在这里是未定义的，是来自我的代码的剪切粘贴，还是您确认它在您的示例中也未定义？这是剪切粘贴。在我这个导入的例子中，存储是在这里定义的。。。很抱歉造成混淆我想知道store/index.js导出是否有问题？只导入@/store/index，目前您只导入@/store我有类似问题，我已经导入了该存储。然而，“这”在我的getter中没有定义。如果我无法从getter访问“this”，我如何访问存储？通过存储本地引用找到了解决方法。我将编辑我的问题。感谢paweloque让我关注这里。谢谢你…本地商店解决了这个问题…在我的例子中，当你调试时，商店在Chrome工具中的计算结果是未定义的，但实际上当代码运行时，它发现商店很好！，这可能是对Chrome内存的一些优化，因为这家商店应该被包装成一个整体