4

我是 Vues.js 的初学者，我在问一些关于 mapMutation 方法的问题。我想用这种方法传递参数，但我不知道如何。我想通过使用 mapMutations 来转换我的两种方法：

increment() {
   this.$store.commit(M_COUNT_INCREMENT, {
      amount: 1,
   });
},
decrement() {
   this.$store.commit(M_COUNT_DECREMENT, {
       amount: 1,
   });
},

我想做这样的事情，但传递我的“金额”参数：

...mapMutations({
   increment: M_COUNT_INCREMENT,
   decrement: M_COUNT_DECREMENT,
}),

任何想法 ？

谢谢

4

5 回答 5

7

你当然可以做到！您可以将一个或多个参数传递给 mutator。您将不得不调整您的数据以匹配您的情况，但这是您实现它的方式：

您在 VUEX 存储对象中的修改器：

mutations: {
  increment (state, newValue) {
    state.counter = state.counter + newValue;
  },
  decrement (state, newValue) {
    state.counter = state.counter - newValue;
  }
}

您的 Vue 方法中的 map Mutator（未计算）：

...mapMutations(['increment', 'decrement'])

带有突变映射的新设置器：

this.increment(this.yourNumber); // Value 1 in your example

而已！

奖金！您可以将许多变量（有效负载）传递给具有值对的变异函数；例如：

this.increment({
  id: this.counterId,
  newValue: this.newValue
});

奖金2！你的mutator应该改变一点：

 mutations: {
  increment (state, payload) {
  state.selectedCounter[payload.id].counter = payload.newValue;
 }
}

惊人？阅读官方文档！https://vuex.vuejs.org/guide/mutations.html

于 2020-05-02T22:51:04.840 回答
1

您实际上正在尝试的是使用有效负载的参数来对突变进行柯里化。

mapMutations() 不可能做到这一点，它只将突变映射到方法 1:1，因为它们是。

因此，您将不得不对这些实例使用初始方式。来自链接的答案： https ://forum.vuejs.org/t/vuex-mapmutations/2455/3

于 2017-06-27T07:04:05.617 回答
1

您的参数，截至 Vue 3 中的 2021 年，已经被传递。

这只是以正确的方式调用/使用代码的问题：

increment() {
   this.$store.commit(M_COUNT_INCREMENT, {
      amount: 1,
   });
},
decrement() {
   this.$store.commit(M_COUNT_DECREMENT, {
       amount: 1,
   });
},

将使用 mapMutations 变成这样：

methods: {
    ...mapMutations([M_COUNT_INCREMENT,M_COUNT_DECREMENT]),
  },

然后在模板或脚本中使用increment() 或 decrement()的任何地方：

利用：

M_COUNT_INCREMENT(payload)
M_COUNT_DECREMENT(payload)

欲了解更多信息，请访问： https ://next.vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components

于 2021-01-12T23:06:32.760 回答
0

您可以通过进行不采用任何其他参数的突变来做到这一点

const state = {value : 0}

// In your mutations
increment(state){
   state.value += 1
},

decrement(state){
   state.value -= 1
},

// In your app
this.$store.commit('increment')
this.$store.commit('decrement')

另一种方法是保留您的原始突变，但使用动作作为它周围的别名，但我不认为这是一种“vuex”的做事方式。

于 2017-07-21T01:44:29.963 回答
0

this.DECREMENT({minus: 2})会导致this.$store.commit('DECREMENT', obj). 在本地methods: increment()app.vue 中使用

<template>
      <div id="app">
        <p>{{count}}</p>
        <button @click="INCREMENT">+</button>
        <button @click="decrement">-</button>
      </div>
    </template>

    <script>
    import { mapMutations } from "vuex";
    import { mapState } from "vuex";

    export default {
      computed: mapState(["count"]),

      methods: {
        decrement() {
          this.DECREMENT({ minus: 2 })
        },

        ...mapMutations(["INCREMENT", "DECREMENT"])
      }
    };
    </script>

store.js

export const store = () => {
  return new Vuex.Store({
    state: {
      count: 0,
    },

    mutations: {

      INCREMENT (state) {
        state.count++;
      },

      DECREMENT (state, obj) {
        state.count -= obj.minus;
      }
    },
};
于 2019-09-24T07:20:54.540 回答