从VueRouter.beforeEach（）访问Vuex时存储未定义

Question

我正在尝试按本文所示访问Vuex存储：这里

我浪费了一个早上好，因为我确定这将是一个简单的错字，但是它使我无所适从。在beforeEach（）=> {}主体内部，我得到“未定义存储”。

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

从关键代码中剪切粘贴：

src /路由器/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

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