Nuxt.js: 디스패치 Vuex 액션이 mapState와 함께 작동하지 않음

Nuxt.js: 디스패치 Vuex 액션이 mapState와 함께 작동하지 않음

NuxtJ에서 페치 훅으로 액션을 디스패치하려고 합니다.s

async fetch() {
  return await this.$nuxt.context.store.dispatch('settings/getSettings')
}

그리고나서

<el-table v-if="!$fetchState.pending" :data="settings.colors">
 ...
</el-table>

그들.

computed: {
  ...mapState({
    loading: 'settings/loading',
    settings:'settings/settings'
  }),
}

최종적으로 에러 색상은 정의되어 있지 않습니다만, 아래의 코드는 Vuex 없이 동작합니다.

async fetch() {
  return await this.$axios.$get(EP_GET_DATA_SETTINGS).then((data)=>{
    this.settings = data
  })
}

이 문제를 해결할 방법을 조언해 주세요.

사용할 때mapStateVuex 모듈의 경우 첫 번째 인수는 모듈 이름입니다.

computed: {
  ...mapState('settings', {
    loading: 'loading',
    settings:'settings'
  }),
}

어레이 구문을 사용하여 이를 수행하는 다른 방법은 다음과 같습니다.

computed: {
  ...mapState('settings', ['loading', 'settings'])
}

computed: {
  ...mapState({
    loading: (state) => state.settings.loading,
    settings: (state) => state.settings.settings,
  }),
}

언급URL : https://stackoverflow.com/questions/65974317/nuxt-js-dispatch-vuex-action-not-working-with-mapstate