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

Posted 2023-02-23

【中文标题】从 VueRouter.beforeEach() 访问 Vuex 时存储 undefined

【英文标题】：Store undefined when accessing Vuex from VueRouter.beforeEach()

【发布时间】：2018-07-06 20:34:57

【问题描述】：

我正在尝试访问 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()
    ...
)

【问题讨论】：

通过存储本地引用找到了解决方法。我会编辑我的问题。道具 paeloque 让我专注于此。

谢谢...本地商店解决了这个问题....

在我的情况下，当你调试时，商店确实在 Chrome 工具中评估为 undefined，但实际上当这段代码运行时，它发现商店很好！这可能是一些 Chrome 内存优化，因为这个商店应该被包装到一个闭包中

【参考方案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()
)

【参考方案2】：

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

正确

const IsAuthenticated = store.getters.isAuthenticated

不正确

const IsAuthenticated = store.getters.IsAuthenticated()

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

【参考方案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;

【讨论】：

谢谢。那条评论//商店在这里是未定义的，是我的代码中的剪切粘贴，还是您确认它在您的示例中也没有定义？

那是剪切和粘贴。在我的这个导入的情况下，商店是在这一点上定义的......抱歉造成混淆

我想知道 store/index.js 导出是否有问题？

只导入@/store/index，目前只导入@/store

我有类似的问题，我已经导入了商店。然而，“这个”在我的吸气剂中是未定义的。如果我无法从 getter 访问“this”，我该如何访问 store？