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