Question

我要设置Vuex突变如下：

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

但是我发现了错误：

未捕获的TypeError：无法读取未定义的属性“存储”

如何在模块突变名称中正确使用 props ？

我想映射this.$store.commit('form1/changeModel')，其中form1是从道具中设置的。

Answer 1

我认为没有办法在mapActions上绑定它。但是您可以使用$store.dispatch

来调用它

methods: {
  changeModel() {
    this.$store.dispatch(`${this.store}/changeModel`);
  }
}

Answer 2

Vuex帮助器preg_replace('/[;\-\\\+:<>°~\/\|!?%$`¬#*()\[\]]/umX','',rawurldecode($string))可以与mapMutations一起使用的功能一起使用。

似乎没有相关文档，但是Vuex单元测试helpers.spec.js说明了这种模式。

this

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

您的代码更改为：

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`) } }) } }-mapMutations负责注入changeModel()参数。

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

Answer 3

这不是您要求的解决方案，但其效果是相同的。由于突变是可变参数，因此很明显将其作为输入参数放入函数中，而不用更改突变名称。我会在商店中创建一个这样的动作：

changeModel ({dispatch, commit, rootGetters}, mutationName) {
 commit(`${mutationName}/changeModel`, {}, {root: true})
})

我将在将mutationName传递给它的组件中使用此操作。

我可以在Vue实例方法中传播的mapMutations中使用“ this”吗？

3 个答案: