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...