定义Vue-Router路由时访问Vuex状态 [英] Accessing Vuex state when defining Vue-Router routes

问题描述

我有以下Vuex商店（main.js）：

I have the following Vuex store (main.js):

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//init store
const store = new Vuex.Store({
    state: {
        globalError: '',
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

//init app
const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')

我还为Vue-Router定义了以下路由（路由。 js）：

I also have the following routes defined for Vue-Router (routes.js):

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//define routes
const routes = [
    { path: '/home', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]

我正在尝试这样做，以便如果Vuex商店的用户对象具有经过身份验证的属性为false，请使用路由器将用户重定向到登录页面。

I'm trying to make it so that if the Vuex store's user object has authenticated property false, have the router redirect the user to the Login page.

我有：

Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && ???) {
        // set Vuex state's globalError, then redirect
        next("/Login")
    } else {
        next()
    }
})

问题是我不知道如何从beforeEach函数中访问Vuex商店的用户对象。

The problem is I don't know how to access the Vuex store's user object from inside the beforeEach function.

我知道我可以使用 BeforeRouteEnter 在组件内部使用路由器保护逻辑，但这会使每个组件变得混乱。我想在路由器级别集中定义它。

I know that I can have the router guard logic inside components using BeforeRouteEnter, but that would clutter up each component. I want to define it centrally at the router level instead.

推荐答案

正如所建议的这里，您可以做的是从您的商店中导出您的商店并将其导入路线的.js 即可。它将类似于：

As suggested here, what you can do is to export your store from the file it is in and import it in the routes.js. It will be something like following:

您有一个 store.js ：

import Vuex from 'vuex'

//init store
const store = new Vuex.Store({
    state: {
        globalError: '',
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

export default store

现在在 routes.js 中，你可以拥有：

Now in routes.js, you can have:

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from ./store.js

Vue.use(VueRouter)

//define routes
const routes = [
    { path: '/home', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]

Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && ???) {
        // You can use store variable here to access globalError or commit mutation 
        next("/Login")
    } else {
        next()
    }
})

在 main.js 中，您还可以导入商店：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import store from './store.js'

//init app
const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')

这篇关于定义Vue-Router路由时访问Vuex状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！