Question

我是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,
}),

有什么想法吗？

谢谢

Answer 1

你实际上正在尝试用有效载荷的参数来解释变异。

对于mapMutations（）来说，这是不可能的，因为它只是将突变映射到方法1：1，因为它们是。

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

Answer 2

您的参数（截至 2021 年在 Vue 3 中）已被传递。

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

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

Answer 3

你可以通过制作一个不带任何其他参数的突变来实现这一目标

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

另一种方法是保留原始变异，但使用操作作为别名，但我不觉得这是一个＆＃39; vuex＆＃39;做事的方式。

Answer 4

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;
      }
    },
};

Answer 5

当然可以！您可以将一个或多个参数传递给mutator。您将需要调整数据以适合您的情况，但这是实现数据的方法：

您在VUEX内部的变体存储对象：

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

您的Vue方法内的地图Mutator（未计算）：

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

您具有突变映射的新二传手：

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

就是这样！

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

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

BONUS2！而且您的增值器应该有所变化：

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

很棒吗？阅读官方文档！ https://vuex.vuejs.org/guide/mutations.html

Vuejs：mapMutations

5 个答案: