如何从 Vue 路由器访问 Vuex getter答案

【问题标题】：How to access a Vuex getter from Vue router如何从 Vue 路由器访问 Vuex getter
【发布时间】：2021-04-26 20:26:12
【问题描述】：

我有一个包含我的路由的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

authentication.js

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

export default authentication

【问题讨论】：

authentication 是模块还是您的主要商店？
@Dan 这是一个模块。

标签： javascript vue.js vuejs2 vuex vue-router

【解决方案1】：

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

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

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

store.getters.isLoggedIn

如果它是命名空间的，那么您将需要使用命名空间模块语法，如下所示：

store.getters['authentication/isLoggedIn']

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

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

【讨论】：