Change another module state from one module in Vuex

Question

I have two modules in my vuex store.

var store = new Vuex.Store({     modules: {         loading: loading          posts: posts     } }); 

In the module loading, I have a property saving which can be set either true or false and also have a mutation function named TOGGLE_SAVING to set this property.

In the module posts, before and after fetching posts, I want to change the property saving. I am doing it by calling commit('TOGGLE_SAVING') from one of the actions in the posts module.

var getPosts = function (context) {     contex.commit(TOGGLE_LOADING); }; 

When it tried to commit, I got following error in the console

[vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING  

How can I mutate state in another module using commit?

Answer 1

Try it with following parameters as suggested here;

commit('TOGGLE_LOADING', null, { root: true }) 

If you have namespaced set to true (in Nuxt that's the default when in modules mode), this becomes:

commit('loading/TOGGLE_LOADING', null, { root: true }) 

Answer 2

you can use action to commit mutation which defined in another module,then you will modify state in another module.

like this:

posts: {   actions: {     toggleSavingActions(context) {       // some actions        context.commit("TOGGLE_SAVING"); // defined in loading module     }   } }