What are mutations in Vuex?

Vuex is the state management library for Vuejs. Vuex makes use of a central state to manage its store data. It only allows a change of its state through the use of mutations.

Another point of note is that Vuex only allows the execution of synchronous codes in its handler functions. This is because asynchronous calls in mutations can be difficult to debug.

For example, when you call two mutations containing asynchronous callbacks to change the state, it is difficult to know which one will change the state. A mutation is meant to do a single thing, update the state and nothing else.

Sample mutation

In the below code, we can see the state and mutation object in the store. The changeStatus mutation is used to update the value of status in the state.

Hence, once the changeStatus mutation is triggered anywhere in the codebase it results in the update of the status value.

const store = new Vuex.Store({
  state: {
    status: false
  },
  mutations: {
    changeStatus (state) {
      !state.status
    }
  }
})

Calling mutations

To trigger a mutation, the store.commit function needs to be called.

To trigger the changeStatus mutation we created above, we simply need to input the following:

store.commit('changeStatus')

Commit with payload

An additional argument can also be sent to the store.commit, this argument is known as the mutation payload.

In the example below, the payload here is 1 and has been received as val in the count mutation. It is used to increment the value of count in the store state:

const store = new Vuex.Store({
  state: {
    count: 0
  },
 mutations: {
    count (state, val) {
      state.count += val
    }
  }
})

Here the payload is 1:

store.commit('count', 1)

The type of the payload can also be an object:

const store = new Vuex.Store({
  state: {
    count: 0
  },
 mutations: {
    count (state, payload) {
      state.count += payload.count
    }
  }
})

The payload here is an object with value { count: 1 }:

store.commit('count', { count: 1 })

Use in components

To have access to our mutations in our components, we simply call the this.＄store.commit('mutationKey').

In the example below, when the Increment button is clicked and the count method is called, it triggers the count mutation by committing the mutation. This results in an update of the count value in the store. To see this in action, we proceeded to show the value of the count state by rendering the getCount computed value.

The getCount computed value accesses the state to get the value of count:

const Counter = {
  template: `<div> 
<span>{{ getCount }}<span> 
<br/>
<button @click="count(1)"> Increment</button>
</div>`,
computed: {
    getCount () {
      return this.$store.state.count
    }
  },
  methods: {
    count (val) {
      return this.$store.commit('count', { count: val })
    }
  }
}

Alternatively, we can use mapMutations:

import { mapMutations } from 'vuex'

export default {
  computed: {

 ...mapMutations([
      'count', // map `this.count()` to `this.＄store.commit('count')`
    ]),
 }
}

Thanks for reading!