vue.js - 无法读取未定义的属性(读取 '$store')

Question

Hii 我收到此错误无法读取未定义的属性(读取“$store”):这是我的路由器(index.js)

{
  path: '/',
  name: 'login',
  component: () => import( /* webpackChunkName: "hours" */ '../views/login.vue'),
  meta: {
    hideNavbar: true,
  },
  beforeEnter: (to, from, next) => {
    if (this.$store.state.authenticated.admin === true) {
      next('/home');
    } else {
      next(false);
    }
  }

在上面的代码中，我正在努力导航到主页...收到此错误。这里`TypeError:无法读取未定义的属性(读取“$store”)

Answer 1

在 vue 路由器内部，您没有 vue 实例。因此无法访问 this.$store.state。为了访问您的商店，您需要将 vuex 包含到路由器中。

import store from '@/store/index.js';

然后要从商店调用数据，您将调用我们刚刚导入的商店变量。例如

if(!store.state.user){
 next('/401');
}

对于你的情况，它看起来像这样:

import store from '@/store/index.js';

{
  path: '/',
  name: 'login',
  component: () => import( /* webpackChunkName: "hours" */ '../views/login.vue'),
  meta: {
    hideNavbar: true,
  },
  beforeEnter: (to, from, next) => {
    if (store.state.authenticated.admin === true) {
      next('/home');
    } else {
      next(false);
    }
  }
}

我建议也看看这个答案: Accessing Vuex store in Router