如何正确使用 Nuxt / Vue ...mapMutations

Question

I'm trying to use ...mapMutations with Vuex modules in Nuxt. My call to this.setDates(dates) results in an error:

this.setDates is not a function

In my Nuxt store: store/header.js

export const mutations = {
    setDates(state, dates) {
        state.dates = dates;
    },
}

In my component

methods: {
    ...mapMutations(
        {'header': ['setDates']},
    ),
    changeDate(dates) {
        this.setDates(dates);
    }
}

Answer 1

This will try to create a method called header using the mutation setDates :

mapMutations(
  {'header': ['setDates']},
)

I believe what you want is:

mapMutations('header', ['setDates'])

This will treat header as a namespace instead.

Answer 2

You map your mutation as header, i think u need call header() instead of this.setDates()

from https://vuex.vuejs.org/guide/mutations.html

...mapMutations({
      add: 'increment' // map `this.add()` to `this.$store.commit('increment')`
    })