Change another module state from one module in Vuex
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
?
Solution 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 })
Solution 2:
You can also import the store, as you normally do in any js file and use it. For example:
// src/state/modules/posts.js
import store from '@/state/store'
...
store.commit('posts/TOGGLE_LOADING')
...
This works pretty well, the only donwside is that can difficult isolate tests or mock-up.
Edition: Recently I have eliminated all code using the technique I mention due the testing problems. Indeed you can always change the state of other modules following the recommended way, as in this example. Very useful if you manage auth and profile in distincts modules.
logout: context => {
return new Promise((resolve) => {
// Clear token in all axios requests
axios.defaults.headers.common['Authorization'] = ''
// Logout from firebase
firebase
.auth()
.signOut()
.then(() => {
// Update state in profile module
context.commit('profile/SET_USER', null, {
root: true
})
resolve()
})
.catch(error => reject(error))
})
}
Solution 3:
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
}
}
}