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

The heart module is like this; put it before the store declaration:

const heart = {
  state: { loves: undefined },
  mutations...