In Vuex, why are the module's state accessed as 'store.state.module' instead of &#039-CodePudding

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

CodePudding user response：

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.