We can divide our store into modules to scale the app. Each module can have a state, mutations, actions, and getters, as follows:
const module1 = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const module2 = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const store = new Vuex.Store({
modules: {
a: module1,
b: module2
}
})
You can then access each module's state or other properties, as follows:
store.state.a
store.state.b
When writing modules for your store, you should understand the local state, the root state, and the namespacing in the store's modules. Let's look at them in the following sections.