mobx该怎么组织和划分store？

在平常项目开发中，发现前端同学在进行数据管理时存在有如下问题：

• 进行到开发后期发现有些store体积异常庞大，动辄上千行代码，影响代码的可读性、维护性；
• 很多store之间存在通信的场景，而之前组织的方式不便于store之前的通信；
• 多人协作开发时难免会同时更改同一个store，不可避免的造成代码冲突；

鉴于上述问题，在本次事故单导购项目中将对store的组织与划分做出如下改进：

• 考虑到每次前端任务都是根据UI模块来拆解、分配的，为了更加契合每个前端开发人员的任务，避免工作交叉。现在，store根据UI模块来划分，每一个UI模块划分出两个store，一个UI store，一个Domain store。UI store是指当前UI的状态，比如：窗口尺寸、当前展示的页面、渲染状态、网络状态等等；Domain store主要包含页面所需的各种数据，带有业务性的数据（一般是需要从后端获取的）。

• 创建一个 RootStore 来实例化所有 stores ，并共享引用，使得所有的childStore都能通过rootStore进行通信，不用再像之前使用回调的形式实现通信。

示例：

class RootStore {
 constructor() {
 this.userStore = new UserStore(this)
 this.todoStore = new TodoStore(this)
 }
}
​
class UserStore {
 constructor(rootStore) {
 this.rootStore = rootStore
 }
​
 getTodos(user) {
 // 通过根 store 来访问 todoStore
 return this.rootStore.todoStore.todos.filter(todo => todo.author === user)
 }
}
​
class TodoStore {
 @observable todos = []
​
 constructor(rootStore) {
 this.rootStore = rootStore
 }
}

参考：https://cn.mobx.js.org/best/s...