如何从 Vue 路由器访问 Vuex getter

Question

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

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

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

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

身份验证.js

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

export default authentication

Answer 1

首先导入 main store，而不是直接导入一个 Vuex 模块：

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

您的模块没有命名空间，所以现在您可以访问 getter，如下所示：

store.getters.isLoggedIn

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

store.getters['authentication/isLoggedIn']

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

如果您不使用命名空间，则会冒多个模块使用同名 getter 的风险，并且不清楚 getter 来自哪个模块。