Vuex에 액세스하여 vue 라우터의 모듈 getter를 지연시켰습니다.

Vuex에 액세스하여 vue 라우터의 모듈 getter를 지연시켰습니다.

사용자가 인증되었는지 확인하여 루트를 보호하려고 합니다.다음은 루트 예를 제시하겠습니다.

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

그리고 난 이렇게 경비원을 세팅했어

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 모듈은 다음과 같습니다.

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,
  }
}

단, 루트 가드에 나타나듯이 인증 게터에 접속하려고 하면 다음 오류가 발생합니다.

정의되지 않은 속성 'getters'를 읽을 수 없습니다.

제가 뭘 잘못하고 있는 거죠? 어떻게 하면 고칠 수 있을까요?

에러 메세지는, 다음과 같이 표시됩니다.this.$store액세스하려고 할 때 정의되지 않았습니다.this.$store.getters따라서 스토어가 초기화되지 않았거나 라우터 내에서 정상적으로 설정되어 있지 않은 것 같습니다.namesthed getters를 사용하여 액세스.getters['name/getter']그 자체로 옳다.

몇 가지 튜토리얼에 따르면store.js내 스토어를 정의하고, 그 다음에 내 스토어에 Import합니다.router.js다음과 같습니다.

import store from './store'

직접 접속할 수 있습니다.store대신this.$store:

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

제 생각에 문제는...this.$storeVue-Components에 자동으로 추가되지만 라우터는 실제로 컴포넌트가 아니기 때문에,$store-멤버스토어 Import는 이 문제를 해결할 수 있습니다.

언급URL : https://stackoverflow.com/questions/46908306/vuex-accessing-namespaced-module-getters-in-vue-router