在构建响应式应用程序时，状态管理是一个核心的挑战。MobX 提供了一种简洁而强大的方法来管理状态，通过使用可观察的数据结构和响应式编程。在 MobX 的生态系统中，makeObservable, observable, 和 action 是三个关键的 API，它们共同构成了状态管理的基础。本文将深入探讨这些 API 的含义和用途，帮助你更有效地使用 MobX。
observable：让数据可观察
observable 是 MobX 中的一个装饰器或高阶函数，它允许你将对象、数组、Map、Set 或类的属性标记为可观察的。这意味着 MobX 将跟踪这些数据的变化，并在它们发生变化时通知任何依赖于这些数据的组件或观察者。
使用 observable 时，你需要手动定义哪些属性是可观察的。这提供了对状态管理的细粒度控制，但也意味着你需要手动创建 getter 和 setter（如果需要的话）来管理状态的访问和修改。
import { observable, action } from 'mobx';
class Todo {
@observable title = "Learn MobX";
@observable completed = false;
constructor(title) {
this.title = title;
}
@action
toggleCompleted() {
this.completed = !this.completed;
}
}
在这个例子中，title 和 completed 属性被标记为可观察的，而 toggleCompleted 方法被标记为一个动作（action），用于修改状态。
action：定义响应式行为
action 是另一个装饰器或高阶函数，它用于将函数标记为动作（action）。动作是修改可观察状态的函数。当你在一个动作函数中修改可观察状态时，MobX 会跟踪这些变化，并确保任何依赖于这些状态的组件都会响应这些变化进行更新。
使用 action 可以确保状态的更改是可预测的，并且只在正确的时间触发更新。这有助于避免意外的副作用和状态不一致的问题。
javascript
@action
addTodo(newTodo) {
this.todos.push(newTodo);
}
在这个例子中，addTodo 方法被标记为一个动作，这意味着它将被 MobX 跟踪，以确保任何依赖于 todos 数组的组件都会在新任务被添加时更新。
makeObservable：动态添加可观察性
makeObservable 是一个函数，用于在运行时将对象转换为可观察对象。它通常与 observable 结合使用，但提供了更多的灵活性。你可以使用 makeObservable 来部分地使对象可观察，或者在对象创建后动态地添加可观察性。
这个函数通常用于那些不能直接使用装饰器的情况，或者当你需要更细粒度的控制时。
import { makeObservable, observable } from 'mobx';
class Store {
todos = [];
constructor() {
makeObservable(this, {
todos: observable,
addTodo: action
});
}
addTodo(newTodo) {
this.todos.push(newTodo);
}
}
在这个例子中，makeObservable 接受两个参数：要转换的对象和描述哪些属性应该是可观察的以及它们的行为（如是否是动作）的对象。这种方式提供了比装饰器更灵活的控制，因为你可以在对象创建后动态地添加可观察性。
结论
makeObservable, observable, 和 action 是 MobX 中的三个核心 API，它们共同构成了一个强大而灵活的状态管理系统。通过理解这些 API 的含义和用途，你可以更有效地使用 MobX 来管理你的应用程序的状态，从而构建出更加响应式和可维护的应用程序。
