Question

我有一个包含我的路由的 index.js 文件，我正在尝试在管理面板路由上创建一个 beforeEnter 守卫，并且只让经过身份验证的管理员进入。问题是当我 {{ 1}}，我明白了：

console.log(store.getters.isLoggedIn)

而不是 ƒ isLoggedIn(state) { return state.user.token ? true : false } 或 true，我不确定为什么会发生这种情况。我的吸气剂看起来像这样：

false

我的路线在这里：

getters: {
    isLoggedIn: state => {
        return state.user.token ? true : false
    }
}

store.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import AdminPanel from '../views/AdminPanel.vue'
import store from "../store/authentication.js";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: "/admin",
        component: AdminPanel,
        beforeEnter: (to, from, next) => {
            console.log(store.getters.isLoggedIn)
        }
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

authentication.js

import Vue from 'vue'
import Vuex from 'vuex'
import authentication from './authentication'
import cart from './cart'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        authentication,
        cart
    }
})

export default store

Answer 1

先导入主存储，而不是直接导入一个Vuex模块：

import store from "../store/index.js";

你的模块不是 namespaced，所以现在你可以像这样访问 getter：

store.getters.isLoggedIn

如果它是命名空间的，那么你需要像这样使用命名空间模块语法：

store.getters['authentication/isLoggedIn']

在此语法中，字符串的前半部分是模块名称，然后是斜杠，然后是 getter 名称。

当您没有命名空间时，您将面临多个模块使用同名 getter 的风险，并且不清楚 getter 来自哪个模块。

如何从 Vue 路由器访问 Vuex getter

1 个答案: