时间戳

首页 > 解决方案 > Nuxt.js：调度 Vuex 操作不适用于 mapState

javascript - Nuxt.js：调度 Vuex 操作不适用于 mapState

问题描述

我正在尝试在 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
  })
}

请告知如何解决这个问题

标签： javascriptvue.jsnuxt.jsvuexvuex-modules

解决方案

当您使用mapStateVuex 模块时，第一个参数是模块名称：

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

这是使用数组语法的另一种方法：

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

推荐阅读