如何正确使用Nuxt / Vue…mapMutations

Question

我正在尝试将...mapMutations与Nuxt中的Vuex模块一起使用。我对this.setDates(dates)的呼叫导致错误：

this.setDates不是函数

在我的Nuxt商店：store/header.js

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

在我的组件中

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

Answer 1

这将尝试使用突变header创建一个名为setDates的方法：

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

我相信您想要的是：

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

这会将header视为命名空间。

Answer 2

您将突变映射为标题，我认为您需要调用header（）而不是this.setDates（）

来自https://vuex.vuejs.org/guide/mutations.html

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