从 VueRouter.beforeEach() 访问 Vuex 时存储 undefined

Question

我正在尝试访问 Vuex 商店，如本文所示：here

我已经浪费了一个早上好，我确信这将是一个简单的错字，但它逃脱了我。在 beforeEach() => {} 体内，我得到“未定义存储”。

我正在使用 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

编辑： 商店的出口似乎没问题。通过保持对导入商店的本地引用并引用它，它可以工作。在我使用 beforeEach() 时似乎与上下文有关。

const lStore = store;
router.beforeEach((to, from, next) => {
    // store is undefined here, lStore is good to go
    const IsAuthenticated = lStore.getters.IsAuthenticated()
    ...
})

Answer 1

我也有类似的情况。就我而言：

• 我有存储模块。所以在/store/index.js 上导入的所有模块
• 在路由器/router/index.js上，我导入了商店
• 然后在路由器上使用 store getter 效果很好

store/index.js

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

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

路由器/index.js

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

Answer 2

这是最盛大的追尾练习。问题是我的吸气剂没有被称为“IsAuthenticated”（它也不是一个函数）。我让自己被我的调试器欺骗了。将所有代码恢复到原始帖子并将getter调用更改为

正确

const IsAuthenticated = store.getters.isAuthenticated

不正确

const IsAuthenticated = store.getters.IsAuthenticated()

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

Answer 3

我有一个非常相似的代码，唯一相关的区别似乎是我在 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;