Vue.js 2 Design Patterns and Best Practices

Modules and scalability

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