Vuex 状态或 getter 总是返回 undefined答案

【问题标题】：Vuex state or getters always returns undefinedVuex 状态或 getter 总是返回 undefined
【发布时间】：2021-08-23 10:09:32
【问题描述】：

我在 Vuex 4 中构建了一些模块，但我似乎无法从中获取任何数据，可能它没有保存或我的逻辑有问题。

store/mutation-types.js

export const SET_LOCALE   = 'SET_LOCALE'
export const SET_LANGUAGE = 'SET_LANGUAGE'

store/index.js

import { createStore } from 'vuex'

const requireContext = require.context('./modules', false, /.*\.js$/)

const modules = requireContext.keys()
    .map(file =>
        [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
    )
    .reduce((modules, [name, module]) => {
        if (module.namespaced === undefined) {
            module.namespaced = true
        }
        return { ...modules, [name]: module }
    }, {})
    
const store = createStore({
     modules
})

export default store

store/modules/i18n.js

import * as types from '../mutation-types.js'

export const state = {
    locale: 'en-US',
    language: 'en'
}

export const getters = {
    locale: state => state.locale,
    language: state => state.language
}

export const mutations = {
    [types.SET_LOCALE] (state, { locale }) {
        state.locale = locale;
    },
    [types.SET_LANGUAGE] (state, { language }) {
        state.language = language;
    }
}

export const actions = {
    setLocale ({ commit }, { locale }) {
        commit(types.SET_LOCALE, { locale })
    },
    setLanguage({ commit }, { language }) {
        commit(types.SET_LANGUAGE, { language })
    }
}

component.vue

<script>
    import { mapGetters } from 'vuex'
    
    export default {
        computed: {
            ...mapGetters(
                {
                    language: 'i18n/language'
                }
            ),
            getLanguage () {   
               console.log('I am using the language..')// returns
               console.log(this.$store.getters.language)// returns undefined
            }
        },
    };
</script>

【问题讨论】：

我认为你设置了 namespaced:true 所以在调用那个 getter 时你可能需要 namespace 像：this.$store.getters["namespace/value"].language，然后 ...
好吧，如果我使用 mapGetters（参见我的示例），我怎样才能获得这些值

标签： vue.js vuex vuex-modules

【解决方案1】：

getter 键存储为"__namespace__/__gettername__"。在你的情况下，它是"i18n/language"，所以你会这样读：

this.$store.getters['i18n/language']

例子：

<template>
  <div>{{ getLanguage }}</div>
</template>

<script>
export default {
  computed: {
    getLanguage () {
      return this.$store.getters['i18n/language']
    }
  }
}
</script>

使用Vuex mapGetters helper，简单写成这样：

<template>
  <div>{{ language }}</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('i18n', ['language'])
  }
}
</script>

【讨论】：

使用 mapGetters 方式时如何访问值？
mapGetters 只是将 getter 映射到本地 prop。因此，上面的代码使您可以通过<script> 中的this.language 或<template> 中的{{ language }} 访问this.$store.getters['i18n/language']。