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