In Vuex, why are the module's state accessed as 'store.state.module' instead of 'store.module.state'?

user_13892841 0
Viewed 42

In the following code, why is the state of moduleA accessed with store.state.a instead of store.a.state?

Since the store holds moduleA, and moduleA holds its state, it makes more sense to me if the state of moduleA was accessed with store.a.state.

const moduleA = {
  state: () => ({ ... }),
  ...
}

const moduleB = {
  state: () => ({ ... }),
  ...
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state
vuex-modules vuex vue.js
1 Answers

The reason it is store.state.a instead of store.a.state is because there is only one state object in Vuex. Under the hood, all of the modules are combined into a single state object.

Vuex docs can provide you with additional information.

user_50466960
Related