Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

State Management with Vuex Chapter 21

As you can see, this merges all of our actions up to when we hit commit to then be part of

our Base State. As a result, the count property is then equal to the action you committed to
Base State.

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

only. As we're importing more than one thing within this file, I gave the store the name of

countStore. Let's define the new module inside store/index.js:

import Vue from 'vue';

import Vuex from 'vuex';

import { countStore } from './modules/count';

Vue.use(Vuex);

export default new Vuex.Store({

modules: {