我可以在Vue实例方法中使用mapMutations中使用"this"吗？

Question

我想将Vuex突变设置如下:

export default {
    props: {
        store: String
    },
    methods: {
        ...mapMutations({
            changeModel: `${this.store}/changeModel`
        })
    }
}

但我抓住了这个错误:

未捕获的TypeError:无法读取未定义的属性"store"

如何在模块变异名称中正确使用道具？

我想要映射this.$store.commit('form1/changeModel'),form1从道具设置的地方.

Answer 1

Vuex 助手mapMutations可以与适用于this.

似乎没有这方面的文档，但 Vuex 单元测试helpers.spec.js说明了该模式。

const vm = new Vue({
  store,
  methods: mapMutations({
    plus (commit, amount) {
      commit('inc', amount + 1)
    }
  })
})

作为奖励，该函数允许将参数传递给突变，这是常见的要求。

您的代码更改将是：

export default {
  props: {
    store: String
  },
  methods: {
    ...mapMutations({
      changeModel(commit) { commit(`${this.store}/changeModel`) }
    })
  }
}

组件内的调用只是changeModel()- mapMutations 负责注入commit参数。

请注意，我不确定除了一些额外的噪音（与简单的相比this.$store.commit()）之外，这会增加很多，但也许您的要求比示例代码更复杂。