Vuex Module Getter에 액세스할 수 없음 - 정의되지 않은 속성 'getters'를 읽을 수 없음"

Vuex Module Getter에 액세스할 수 없음 - 정의되지 않은 속성 'getters'를 읽을 수 없음"

어떤 이유에서인지 가게 게터에 접속할 수 없습니다.

파일 구조:/store/index.js /store/modules/auth.js

store/index.displaces

import Vuex from 'vuex';
import Vue from 'vue';
import auth from './modules/auth';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth
  }
});

auth.displays(인증)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        token: '',
        status: ''
    },

    mutations: {},

    actions: {
        [AUTH_REQUEST]: ({ commit }, {username, password}) => {
            return new Promise((resolve, reject) => {
                commit(AUTH_REQUEST)
                axios({ url: 'authenticate', data: {username, password}, method: 'POST' })
                    .then(resp => {
                        const token = resp.data.token
                        commit(AUTH_SUCCESS, token)
                        resolve(resp) // router.push in login vue
                    })
                    .catch(err => {
                        commit(AUTH_ERROR, err)
                        reject(err)
                    })
            })
        }
    },

    getters: {
        isAuthenticated: state => !!state.token,
        authStatus: state => state.status
    }
})

App.vue

...
<v-app-bar-nav-icon @click="drawer = !drawer"  v-if="this.authenitcated">
...
computed: {
    ...mapGetters({authenitcated: 'isAuthenticated'})
}

이름 앞에 있는 게터 등 몇 가지 변형을 시도해 보았지만, 왜 작동하지 않는지 아직 알 수 없습니다.이 튜토리얼 코드를 따르면 스토어가 구현되는 방법을 제외하고 모든 것이 동일합니다.튜토리얼에서는 약간 다른 JS를 사용하고 있습니다.https://www.youtube.com/watch?v=5lVQgZzLMHc&t=2686s

스택 트레이스

TypeError: Cannot read property 'getters' of undefined
    at VueComponent.mappedGetter (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:930)
    at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4473)
    at Watcher.evaluate (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4578)
    at VueComponent.computedGetter [as authenitcated] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4828)
    at Object.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2071)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"64b49ba3-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90& (app.js:1031), <anonymous>:16:16)
    at VueComponent.Vue._render (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3542)
    at VueComponent.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4060)
    at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4473)
    at new Watcher (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4462)

고마워요.

몇 가지 사항:

에서처럼 스토어를 내보내는 경우auth.js다음과 같이 Import해야 합니다.

import * as auth from './auth';

Auth-Store를 위한 네임스페이스가 자동으로 여기에 생성되므로 일반적으로 다음과 같이 액세스합니다.

...mapGetters({
  whatever: 'auth/isAuthenticated',
}),

하지만 다른 매장이 없다면isAuthenticated더 빨리, 괜찮을 거야왜 굳이 '가명'으로 재할당하려고 하는 거죠?authenitcated당신의 안에서App.vue다음과 같이 간단하게 할 수 있습니다.

...mapGetters([
  'auth/isAuthenticated',
  // ...
])

다음 방법으로 액세스 방법this.isAuthenticated.

언급URL : https://stackoverflow.com/questions/61706510/cant-access-vuex-module-getter-cannot-read-property-getters-of-undefined