mobx该怎么组织和划分store？

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

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

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

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

示例：

class Store {
    @observable uiStore: new UIStore();
    
    @observable domainStore: new DomainStore();
}

class UIStore {
    @observable xxx = [];
    
    @action
    xxx = () => {}
}

class DomainStore {
    @observable xxx = [];
    
    @action
    xxx = () => {}
}

• 创建一个 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
 }
}

• 如果参照2来组织store的结构可能改动会很大，可以参照下面示例进行局部的更改

示例：

// index.ts
export default {
  inquiryBaseInfoStore: new InquiryBaseInfoStore();,
  inquiryUserInfoStore: new InquiryUserInfoStore(),
  inquiryBodyStore: new InquiryBodyStore(),
  inquiryAppendStore: new InquiryAppendStore(),
  inquiryTarBarStore: new InquiryTarBarStore(),
  inquiryUIStateStore: new InquiryUIStateStore(),
}

比如inquiryBodyStore需要用到inquiryBaseInfoStore中的变量和方法，可以这样改动：

// index.ts
const BaseStore = new InquiryBaseInfoStore();
export default {
  inquiryBaseInfoStore: BaseStore,
  inquiryUserInfoStore: new InquiryUserInfoStore(),
  inquiryBodyStore: new InquiryBodyStore(BaseStore),
  inquiryAppendStore: new InquiryAppendStore(),
  inquiryTarBarStore: new InquiryTarBarStore(),
  inquiryUIStateStore: new InquiryUIStateStore(),
};

// InquiryBodyStore
class InquiryBodyStore {
  baseStore: any;

  constructor(baseStore: InquiryBaseInfoStore) {
    this.baseStore = baseStore;
  }
  
  ...
}

这样InquiryBodyStore中的baseStore和inquiryBaseInfoStore是同一个引用，通过构造函数引入进来就可以直接this调用了。

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