Vuex 상태 또는 getter는 항상 정의되지 않은 상태를 반환합니다.

Vuex 상태 또는 getter는 항상 정의되지 않은 상태를 반환합니다.

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>

게터 키는 다음과 같이 저장됩니다."__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 도우미를 사용하면 다음과 같이 간단히 기록됩니다.

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

<script>
import { mapGetters } from 'vuex'

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

언급URL : https://stackoverflow.com/questions/67852738/vuex-state-or-getters-always-returns-undefined