Vuejs : mapMutations

Question

I'm beginner with Vues.js and i'm asking something about mapMutation method. I want to pass parameters with this method but i don't know how. I want to transform my two methods by using mapMutations :

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

I want do thing like this but with passing my "amount" parameter :

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

Any idea ?

Thank's

Gabbert

Answer 1

Sure you can do that! You can pass to a mutator one o many parameters. You will have to adjust your data to match your case, but this is the way you'll achieve it:

Your mutators inside VUEX store object:

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

Your map Mutator inside your Vue METHODS (not computed):

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

Your new setter with mutation mapping:

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

THAT'S IT!

BONUS! You can pass many variables (payload) to a mutation function with value pairs; for example:

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

BONUS2! And your mutator should change a bit:

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

Amazing? Read the oficial doc! https://vuex.vuejs.org/guide/mutations.html

Jasmine

Answer 2

What you are essentially trying is currying the mutation with an argument for the payload.

That is not possible with mapMutations(), which only maps the mutations to methods 1:1, as they are.

So you will have to use the initial way for those instances. the answer from the link: https://forum.vuejs.org/t/vuex-mapmutations/2455/3

Hyperopia

Answer 3

Your parameter, as of 2021 in Vue 3, is already being passed.

It's just a matter of calling/using the code in the right way:

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

Will turn into this with mapMutations:

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

Then wherever you used increment() or decrement() in your templates or scripts:

Use:

M_COUNT_INCREMENT(payload)
M_COUNT_DECREMENT(payload)

For more info go to: https://next.vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components

Alfieri

Answer 4

this.DECREMENT({minus: 2}) will cause this.$store.commit('DECREMENT', obj). Use in local 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;
      }
    },
};

Lauryn

Answer 5

You can do this by making a mutation that doesn't take any other params

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

Another way of doing this is by keeping your original mutation, but using actions as an alias around it, but I don't feel this is a 'vuex' way of doing things.

Burney