如何正確使用 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

這將嘗試使用突變setDates創建一個名為header的方法：

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