Dispatch an action in another Vuex module

Splitting up your Vuex stores in different modules can help a lot to make sense of a larger Vue codebase. But every now and then you need a way to communicate between those modules, dispatching actions is the way to go. However, dispatching a Vuex action in a different module does require you to pass an extra argument.

In order to call an action in a different Vuex module you need to pass {root: true} as the third argument of the dispatch() function.

See the following example that dispatches the add action in the toppings module:

const store = new Vuex.Store({
  actions: {
    prepareSalamiPizza({ dispatch }) {
      dispatch("toppings/add", "salami", { root: true });
    },
  },
});

Do keep in mind that {root: true} should always be the third argument in dispatch() even if the action you call doesn’t require a payload. In such a case it is up to you what you pass as the second argument, or payload, to dispatch(). A sensible option, in my opinion, would be null or an empty object({}).