Cannot read properties of undefined (reading '$store')

Question

Hii I'm getting this error Cannot read properties of undefined (reading '$store'): This is my router(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);
    }
  }

In this above code I'm Struggling to navigate to the home page...getting this error. here`TypeError: Cannot read properties of undefined (reading '$store')

Does this answer your question? [Accessing Vuex state when defining Vue-Router routes](https://stackoverflow.com/questions/42603909/accessing-vuex-state-when-defining-vue-router-routes) — Marcello B., Sep 21 '21 at 20:42

score 5 · Answer 1 · answered Sep 21 '21 at 20:40

Inside of vue router, you do not have a vue instance. Therefore there is no way to access this.$store.state. In order to access your store you need to include vuex into the router.

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

Then to call data from the store you will call the store variable we just imported. For example

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

For you case it would look something like this:

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);
    }
  }
}

I'd suggest looking at this answer as well: Accessing Vuex store in Router

score 0 · Answer 2 · answered Sep 22 '21 at 05:17

@MaseehaTasneem You may be able to access internals from within the next() function as below. Try the below and see what's available to you. You may be able to do something like,

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

   return false
 }) 
}

Cannot read properties of undefined (reading '$store')

2 Answers2