无法读取未定义的属性（读取“$store”）

Posted 2023-02-23

【中文标题】无法读取未定义的属性（读取“$store”）

【英文标题】：Cannot read properties of undefined (reading '$store')

【发布时间】：2021-11-15 07:05:46

【问题描述】：

您好，我收到此错误： 这是我的路由器（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'）

【问题讨论】：

谁能帮帮我

你在什么地方混店吗？

这能回答你的问题吗？ Accessing Vuex state when defining Vue-Router routes

【参考方案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

【参考方案2】：

@MaseehaTasneem 您可以从 next() 函数中访问内部结构，如下所示。 试试下面的，看看你有什么可用的。你也许可以做类似的事情，

beforeRouteEnter(to, from, next) 
 next(vm => 
   console.log("vue model", vm)
   
   if (vm.$store.state.authenticated.admin === true) 
     return '/home'
   

   return false
 )