Question

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

我已经浪费了一个美好的早晨，我确信这将是一个简单的错字，但它逃脱了我。在beforeEach（）=＆gt;内{}正文，我得到“商店未定义”。

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

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

var array = ['foo', 'bar baz'];

const map = array.map(word => word.replace(" ", "x ") + "x");

alert(map);

我的整个router.js是：

import store from '@/store/index';

Answer 2

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

<强>正确

const IsAuthenticated = store.getters.isAuthenticated

<强>不正确

const IsAuthenticated = store.getters.IsAuthenticated()

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

Answer 3

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

我的商店里有模块。因此，所有在/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
  }
})

router / index.js

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

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

3 个答案: