如何从 Vue 路由器访问 Vuex getter

Question

我有一个包含我的路由的 index.js 文件，我正在尝试在管理面板路由上创建一个 beforeEnter 守卫，并且只允许经过身份验证的管理员进入。问题是当我console.log(store.getters.isLoggedIn)，我明白了：

ƒ isLoggedIn(state) {
    return state.user.token ? true : false
}

而不是 true 或 false，我不确定为什么会这样。我的 getter 看起来像这样：

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

我的路线在这里：

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

store.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

authentication.js

const authentication = {
    state: {
        user: null
    },
    getters: {
        isLoggedIn: state => {
            return state.user.token ? true : false
        }
    }
}

export default authentication

Answer 1

首先导入主存储而不是直接导入 Vuex 模块：

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

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

store.getters.isLoggedIn

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

store.getters['authentication/isLoggedIn']

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

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

如何从 Vue 路由器访问 Vuex getter

How to access a Vuex getter from Vue router

javascript

vue.js

vue-router

vuex

vuejs2