如何从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";

你的模块没有命名空间，所以现在你可以这样访问getter:

store.getters.isLoggedIn

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

store.getters['authentication/isLoggedIn']

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

当你没有命名空间时，你冒着多个模块使用相同名称的getter的风险，并且不清楚getter来自哪个模块。