11

我想按如下方式设置 Vuex 突变：

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

但我发现了错误：

未捕获的类型错误：无法读取未定义的属性“存储”

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

我要映射this.$store.commit('form1/changeModel')，form1从props中设置。

4

3 回答 3

3

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

methods: {
  changeModel() {
    this.$store.dispatch(`${this.store}/changeModel`);
  }
}
于 2018-08-31T02:18:59.933 回答
3

Vuex helpermapMutations可以与一个适用于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()），但也许您的要求比示例代码更复杂。

于 2018-09-03T23:36:09.220 回答
1

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

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

我会在将突变名称传递给它的组件中使用此操作。

于 2018-09-05T08:30:58.830 回答