Vue：访问路线守卫中的商店prop/variable（路线beforeEach）？

Question

我正在努力检查每个守卫之前的路线中的商店variable/property。我似乎无法弄清楚如何访问商店的属性。

我的代码：

import Vue from 'vue'
import Router from 'vue-router'
import store from "@/components/store.js"
... other imports..

Vue.use(Router);

const routes = [
    { path: '/', component: NluEditor },
    { path: '/nlueditor', component: NluEditor },
    { path: '/login', component: Login },
    { path: '/logout', component: Logout}
];

const router = new Router({
    routes
});

router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        console.log(store)
        if (store.state.loggedInUser) {  // cannot seem to access store ? 
            console.log("You are logged in :) Go to requested page ")
            next()
        }
        else {
            console.log("Not logged in.. redirecting....")
            next('login');
        }
    }
  })

const app = new Vue({
    el: '#app',
    router,
    store,

    render: h => h(App)
})

Answer 1

我通过将 store.state.loggedInUser 更改为 store.getters.loggedInUser 在最近的应用程序中实现了这一点。

本质上是告诉它直接调用getter方法，而不是通过状态映射到方法。

Answer 2

您可以访问商店。导入时没有问题。

问题出在您访问 state.loggedInUser 的方式上。您可能在商店中使用模块，并且 loggedInUser 可能属于一个模块。所以要访问它，你需要引用 loggedInUser 所属的模块名称，如下所示：

if (store.state.moduleName.loggedInUser) {
  ? console.log("You are logged in :) Go to requested page ") 
    next() 
}

将moduleName替换为loggedInUser所属模块的名称。

Vue：访问路线守卫中的商店prop/variable（路线beforeEach）？

Vue : Accessing store prop/variable in route guard (route beforeEach)?

javascript

vue.js

vue-router

vuejs2