Nuxt.js: dispatch Vuex action not working with mapState

1
votes

I'm trying to dispatch action in fetch hook in NuxtJS

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

then

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

them

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

In the end I get an error colours is undefined, But the code below works, without Vuex

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

Please advise how to solve this problem

2
javascriptvue.jsnuxt.jsvuexvuex-modules

2 Answers

0
votes

When you use mapState with a Vuex module, the first argument is the module name:

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

Here is another way to do it with array syntax:

computed: {
  ...mapState('settings', ['loading', 'settings'])
}
-1
votes
computed: {
  ...mapState({
    loading: (state) => state.settings.loading,
    settings: (state) => state.settings.settings,
  }),
}