Vuex state or getters always returns undefined

Question

I have build some modules in Vuex 4 but I cant seem to get any data from it, maybe its not saving or there is something wrong in my logic.

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>

Answer 1

The getter keys are stored as "__namespace__/__gettername__". In your case, it would be "i18n/language", so you would read it like this:

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

Example:

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

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

Using Vuex mapGetters helper, this is simply written:

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

<script>
import { mapGetters } from 'vuex'

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