无法访问 Vuex 模块 Getter - 无法读取未定义的属性 'getters'”

Question

出于某种原因，我无法访问商店 getter。

文件结构： /store/index.js /store/modules/auth.js

store/index.js

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

Vue.use(Vuex);

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

auth.js

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

我已经尝试了一些变体，包括命名空间 getters，但还没有找到它不起作用的原因。按照本教程的代码，除了商店的实现方式外，一切看起来都一样。本教程使用略有不同的 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)

谢谢

Answer 1

几件事：

如果您像在 auth.js 中那样导出商店，您可能必须像这样导入它：

import * as auth from './auth';

我认为它会在此处自动为您的 Auth-Store 创建一个命名空间，因此通常您会像这样访问它：

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

但是，如果您没有其他商店有 isAuthenticated getter，那应该没问题。为什么还要费心将它重新分配给 App.vue 中的 'fake-name' authenitcated。你可以简单地：

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

并通过this.isAuthenticated访问它。

无法访问 Vuex 模块 Getter - 无法读取未定义的属性 'getters'”

Can't access Vuex Module Getter - Cannot read property 'getters' of undefined"

javascript

vue.js

vuex

vuex-modules

无法访问 Vuex 模块 Getter - 无法读取未定义的 属性 'getters'”

Can't access Vuex Module Getter - Cannot read property 'getters' of undefined"

javascript

vue.js

vuex

vuex-modules

无法访问 Vuex 模块 Getter - 无法读取未定义的属性 'getters'”