Question

What are modules in vuex?

Answer 1

If you keep all state of our application in a single big state, the store can get really bloated. To solve this problem, Vuex allows us to divide our store into modules. Here, each module can contain its own state, mutations, actions, getters, and even nested modules.

Let's take an example with multiple modules, configuring them in vuex and accessing different modules,

const moduleOne = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleTwo = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    one: moduleOne,
    two: moduleTwo
  }
})

store.state.one // -> `moduleOne's state
store.state.two // -> `moduleTwo's state