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

Large Application Patterns with Vuex Chapter 18

A last note on the naming--it being implicit that actions are asynchronous while mutations

are synchronous, there is no need, in my opinion, to make the asynchronicity in the name of
the actions explicit.

Separating concerns with modules

When building big applications, the Vuex store can become crowded. Luckily, it's possible
to divide the different concerns of the applications into separate compartments with

modules.

Getting ready

This recipe can be a reference if you want to use modules. You are expected to already

know enough about Vuex.

For this recipe, you will have to be a little familiar with Webpack.

How to do it...

In this recipe, we will model a fully functional human body in a slightly simplified manner.

Every organ will have a separate module.
Create a new Webpack template with vue init webpack and npm install vuex.

Create a new directory with the src/store/index.js file in it. Inside, write the following:

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

modules: {

brain,

heart

}

})

export default store