Vuex 商店在 vue-router 中未定义 [英] Vuex store is undefined in vue-router

问题描述

我有一个路由器和一个全局 beforeEach 钩子来验证身份验证.

I have a router and a global beforeEach hook to validate auth.

import store from "@/store/store";

const router = new Router({
    // routes...
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.getAccessToken) { //undefined store
            next("/access/login");
        }
    }
    else {
        next();
    }
});

export default router;

并且在我的 store/store.js 文件中，我有一个操作请求验证用户/密码，然后尝试重定向到 / 路由(受保护的路由).

And in my store/store.js file, I have an action that makes a request to validate user/password, and then tries to redirect to / route (protected route).

import router from "@/router";

//state, getters...

actions: {
    login({commit}, authData) {
        // axios instance prototyped into vue $http object
        this._vm.$http.post("/auth/login", authData)
            .then(response => {
                commit("saveToken", response.data.token);
            })
            .catch((error) => {
                commit("loginError", error.response.data);
            });
    }
},
mutations: {
    saveToken(state, token) {
        state.accessToken = token;

        router.push({
            path: "/"
        });
    },
    loginError(state, data) {
        return data.message;
    }
}

我遇到的问题是 router.js 中的 store 是 undefined.我已经多次检查了所有导入、路由和名称，它们都很好.

The problem I have is that the store in router.js is undefined. I have checked all imports, routes, and names several times, and they're fine.

由于我在 store 和 store 中导入了 router 和 router<，所以循环引用有问题吗?/代码>?

Could it be a problem with the circular reference due to me importing router in the store and store in the router?

如果是这个问题，我如何从路由器或从商店的路由器访问商店?

If that's the problem, how can I access the store from the router or the router from the store?

编辑

我尝试从商店中删除路由器导入，它运行良好，但以下情况除外:

I've tried to remove the router import from the store, and it works fine with the exception of:

router.push({
    path: "/"
});

因为router没有被导入.

添加@tony19 解决方案

我已经应用了@tony19 提供的解决方案并且它工作正常，但是当我访问 / 路由时，router.app.$store 是未定义的.

I've applied the solution that @tony19 provides and it works fine, but when I access the / route, router.app.$store is undefined.

固定代码:

router.beforeEach((to, from, next) => {
    console.log(`Routing from ${from.path} to ${to.path}`);

    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!router.app.$store.getters["authentication/getAccessToken"]) {
            next("/access/login");
        }
        else {
            next();
        }
    }
    else {
        next();
    }
});

带有调试会话的图像:

推荐答案

这确实是循环引用造成的.您可以使用 避免在 router.js 中导入商店>router.app，它提供了路由器被注入到的关联 Vue 实例的引用.有了这个，你可以通过 router.app.$store 到达商店:

This is indeed caused by the circular reference. You could avoid importing the store in router.js by using router.app, which provides a reference the associated Vue instance the router was injected to. With that, you could get to the store by router.app.$store:

router.beforeEach((to, from, next) => {
  /* ... */
  if (!router.app.$store.getters.getAccessToken) {
    next("/access/login");
  }
});

这篇关于Vuex 商店在 vue-router 中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！