Vuex VUE 라우터에서 네임 스페이스 모듈 게터 접근

Question

나는 사용자가 인증 된 경우 확인하여 내 경로를 보호하기 위해 노력하고,이 예제 경로입니다 :

{ 
    path: '/intranet', 
    component: search, 
    meta: { requiresAuth: true }, 
    props: { 
    tax: 'type', 
    term: 'intranet-post', 
    name: 'Intranet' 
    } 
}, 

그리고는 다음과 같이 가드를 설정하고있다 :

나는 그것이 같은 인증 게터에 액세스 할 때

import Vue from "vue"; 

export default { 
    namespaced: true, 
    state: { 
    authenticated: !!localStorage.getItem("token"), 
    token: localStorage.getItem("token") 
    }, 
    mutations: { 
    login: function(state, token){ 
     state.authenticated = true; 
     state.token = token; 
    }, 
    logout: function(state){ 
     state.authenticated = false; 
     state.token = ''; 
    } 
    }, 
    actions: { 
    login: function({commit}, token){ 
     localStorage.setItem('token', token); 
     commit('login', token); 
    }, 
    logout: function({commit}){ 
     localStorage.removeItem("token"); 
     commit('logout'); 
    } 
    }, 
    getters: { 
    getToken: (state) => state.token, 
    getAuthenticated: (state) => state.authenticated, 
    } 
} 

하지만, :

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresAuth)) { 

    let authenticated = this.$store.getters['auth/getAuthenticated']; 

    if (!authenticated) { 
     next({ 
     path: '/login', 
     query: { redirect: to.fullPath } 
     }) 
    } else { 
     next() 
    } 
    } else { 
    next() 
    } 
}) 

이 은 vuex의 인증을위한 모듈입니다 경로 가드에 표시된 경우 오류가 발생합니다.

Cannot read property 'getters' of undefined

무엇이 잘못 되었나요?

Answer 1

this.$store.getters에 액세스하려고 시도하면 this.$store이 정의되지 않는다는 오류 메시지가 표시되므로 저장소가 초기화되지 않았거나 라우터 내에서 예상되는 방식으로 설정되지 않은 것 같습니다. .getters['name/getter']을 사용하여 네임 스페이스 게터에 액세스하는 것은 정확합니다.

몇 가지 튜토리얼을 따라, 나는 내 가게를 정의 store.js을하고 나는이처럼 내 router.js에 가져올 :

import store from './store' 

을 다음 store 대신 this.$store 직접 액세스 :

let authenticated = store.getters['auth/getAuthenticated']; 

문제는 this.$store이 Vue-Components에 자동으로 추가되지만 라우터는 실제로 구성 요소가 아니기 때문에 $store이 누락되었습니다. - 회원. 상점 가져 오기는이 문제를 해결합니다.