Vue.js 2 Cookbook

How it works...

We have seen how to use modules to split your application concerns into different units. This ability may become important as the project grows in size.

The common pattern is that while inside a mutation, you have direct access to the local state:

const leftLobe = {  namespaced: true,  state: { reason: true },  mutations: {    toggle (state) {      // here state is the left lobe state      state.reason = !state.reason    }  }}

In a mutation, it makes sense to have access only to the local state. The brain, for example, cannot change the heart and vice versa, but what about actions? If we declare an action inside a module, we are passed an object called context that looks like this:

{  "getters":{},  "state":{    "reason":true  }, "rootGetters":{}, ...