At the moment, we have everything in root state. As our application gets larger, it would be a good idea to take advantage of modules so that we can appropriately split our container into different chunks. Let's turn our counter state into its own module by creating a new folder inside store named modules/count.
We can then move the actions.js, getters.js, mutations.js, and mutation-types.js files into the count module folder. After doing so, we can create an index.js file inside the folder that exports the state, actions, getters, and mutations for this module only:
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
export const countStore = {
state: {
count: 0,
},
actions,
getters,
mutations,
};
export * from './mutation-types';I've also elected to export the mutation types from the index.js file, so we can use these within our components on a per-module basis by importing from store/modules/count...