在 Vuex 中，为啥模块的状态被访问为 'store.state.module' 而不是 'store.module.state'？

Posted 2023-02-23

【中文标题】在 Vuex 中，为啥模块的状态被访问为 \'store.state.module\' 而不是 \'store.module.state\'？

【英文标题】：In Vuex, why are the module's state accessed as 'store.state.module' instead of 'store.module.state'?在 Vuex 中，为什么模块的状态被访问为 'store.state.module' 而不是 'store.module.state'？

【发布时间】：2021-12-20 10:41:14

【问题描述】：

在下面的代码中，为什么moduleA的状态是用store.state.a而不是store.a.state访问的？

由于store 拥有moduleA，而moduleA 拥有其state，所以如果moduleA 的state 使用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

【参考方案1】：

之所以是store.state.a而不是store.a.state是因为Vuex中只有一个状态对象。在底层，所有模块都组合成一个状态对象。

Vuex docs 可以为您提供更多信息。

【讨论】：

文档的那一部分帮助这更有意义。我认为 vue 所做的所有抽象都会抽象出商店在后台的工作方式，并让我们使用store.a.state，因为我们在每个模块中声明了state。