Question

背景

我已经创建了router / index.js文件并为Vue应用程序创建了路由器。我将VueX添加到了应用程序中，并在某些组件中使用了它。我想在路由器内使用吸气剂检查登录用户的权限，但无法正确导入VueX。

问题

当我将存储和模块重要到路由器文件index.js时，我正在尝试使用this.$store.registerModule()。尝试此操作时，我在this.$store上未定义。

示例

import Vue from 'vue';
import Router from 'vue-router';
import { mapGetters } from 'vuex';
import authentication from '../store/modules/authentication';
import store from '../store';


if (!(store && store.state && store.state[name])) {
  this.$store.registerModule(name, authentication);
}

此逻辑适用于我在其中使用的任何Vue组件，但不适用于路由器文件。

我的目标是能够像这样检查VueX中的状态，

const getters = {
  ...mapGetters('authentication', ['IS_LOGGED_IN'])
};

const router = new Router({
{
      path: '/admin',
      name: 'Admin',
      component: Admin,
      meta: {
        requiresAuth: true,
        isAdmin: true
      }
  ]
});


router.beforeEach((to, from, next) => {
  if (
    to.matched.some(record => record.meta.requiresAuth) &&
    to.matched.some(record => record.meta.isAdmin)
  ) {
    if (!getters.IS_LOGGED_IN && !getters.IS_ADMIN) {
      next({
        path: '/login',
        params: { nextUrl: to.fullPath }
      });
    } else {
      next();
    }
  } else if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!getters.IS_LOGGED_IN) {
      next({
        path: '/login',
        params: { nextUrl: to.fullPath }
      });
    } else {
      next();
    }
  } else if (to.matched.some(record => record.meta.guest)) {
    next();
  } else {
    next();
  }
});

export default router;

问题

将VueX与Vue路由器一起使用的正确方法是什么？

我尝试过的事情

我尝试使用

store.registerModule(name, authentication);

这在registerModule

上引发未定义

使用VueX $ store到Vue路由器

0 个答案: