Nuxt.js：調度 Vuex 操作不適用於 mapState

Question

我正在嘗試在 NuxtJS 的 fetch 掛鈎中調度操作

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

請告知如何解決這個問題

Answer 1

當您將mapState與 Vuex 模塊一起使用時，第一個參數是模塊名稱：

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

這是使用數組語法的另一種方法：

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

Answer 2

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