MobX 数据存储设计最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00237/article/details/148360664

MobX 数据存储设计最佳实践

mobx Simple, scalable state management. 项目地址: https://gitcode.com/gh_mirrors/mo/mobx

前言

在构建大型前端应用时，合理的数据管理架构至关重要。MobX 作为一个响应式状态管理库，提供了灵活的数据存储方案。本文将深入探讨如何设计 MobX 中的数据存储结构，帮助开发者构建可维护、可扩展的应用架构。

为什么需要数据存储

在传统前端开发中，我们经常遇到以下问题：

业务逻辑散落在组件各处
状态管理混乱难以追踪
相同数据在多个地方重复存储
难以实现服务端渲染和单元测试

MobX 的数据存储(Store)模式正是为了解决这些问题而提出的解决方案。

核心概念：领域存储与UI存储

领域存储(Domain Store)

领域存储负责管理应用的核心业务数据和逻辑，例如：

用户信息
商品数据
订单信息
待办事项

领域存储的主要职责：

实例化领域对象并维护其唯一性
提供与后端的数据同步能力
封装业务逻辑
确保应用的可测试性

领域对象设计建议

领域对象应该使用类(class)来定义，相比普通对象有以下优势：

可以包含业务方法
能更好地控制属性和方法的可见性
支持混合使用可观察和不可观察属性
类型检查更明确

UI存储(UI Store)

UI存储管理与应用界面相关的状态，例如：

当前选中的元素
窗口尺寸
主题设置
加载状态
多语言配置

UI存储的特点：

通常逻辑简单
状态变化频繁
与具体业务解耦
便于实现全局UI状态共享

实际案例解析

领域存储实现示例

class TodoStore {
  todos = []
  isLoading = false
  
  constructor(transportLayer) {
    makeAutoObservable(this)
    this.transportLayer = transportLayer
    this.loadTodos()
  }

  loadTodos() {
    this.isLoading = true
    this.transportLayer.fetchTodos().then(todos => {
      runInAction(() => {
        todos.forEach(this.updateTodoFromServer)
        this.isLoading = false
      })
    })
  }

  updateTodoFromServer(json) {
    let todo = this.todos.find(t => t.id === json.id)
    if (!todo) {
      todo = new Todo(this, json.id)
      this.todos.push(todo)
    }
    todo.updateFromJson(json)
  }
}

class Todo {
  id = null
  task = ""
  completed = false
  
  constructor(store, id) {
    makeAutoObservable(this)
    this.store = store
    this.id = id
  }
  
  updateFromJson(json) {
    this.task = json.task
    this.completed = json.completed
  }
}

UI存储实现示例

class UiState {
  language = "zh_CN"
  theme = "light"
  windowSize = { width: 0, height: 0 }
  
  constructor() {
    makeAutoObservable(this)
    this.updateWindowSize()
    window.addEventListener("resize", this.updateWindowSize)
  }
  
  updateWindowSize = () => {
    this.windowSize = {
      width: window.innerWidth,
      height: window.innerHeight
    }
  }
  
  toggleTheme() {
    this.theme = this.theme === "light" ? "dark" : "light"
  }
}

多存储组合模式

在复杂应用中，我们通常需要多个存储协同工作。推荐使用RootStore模式来管理各个存储之间的关系：

class RootStore {
  constructor() {
    this.uiStore = new UiStore(this)
    this.todoStore = new TodoStore(this)
    this.userStore = new UserStore(this)
  }
}

// 在其他存储中可以通过rootStore访问其他存储
class UserStore {
  constructor(rootStore) {
    this.rootStore = rootStore
  }
  
  getTodosForUser(userId) {
    return this.rootStore.todoStore.todos.filter(
      todo => todo.userId === userId
    )
  }
}