Mutations are similar to events. If you want to change state in a Vuex store you need to commit mutation. Actions commit mutations. It contains arbitrary asynchronous operations. You don’t need actions if your operations are synchronous i.e. mutations are synchronous and actions are asynchronous.

To manage state changes Vue.js developers developed it this way. Vuex mutations are usually events each has a name and handler.

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // mutate state
      state.count++
    }
  }
})

Action handlers receive a context object which has the same properties on store instance. Then you can call a context.commit to commit a mutation or access state and getters using context.state and context.getters.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }

})