정의되지 않은 의 속성을 읽을 수 없습니다('$store' 읽기).

정의되지 않은 의 속성을 읽을 수 없습니다('$store' 읽기).

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

위의 코드에서 홈 페이지로 이동하는 데 어려움을 겪고 있습니다.이 에러가 표시됩니다.here'TypeError: 정의되지 않은 속성을 읽을 수 없습니다('$store' 읽기).

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

이 답변도 참고하시기 바랍니다.라우터의 Vuex 스토어 접근

@MasehaTasneem 다음과 같이 next() 함수 내에서 내부 접속이 가능합니다.아래를 시험해 보고, 이용 가능한 것을 확인해 주세요.이런 걸 할 수 있을 거예요

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

   return false
 }) 
}

언급URL : https://stackoverflow.com/questions/69273635/cannot-read-properties-of-undefined-reading-store