1. 简介
mobx-delorean 是一款基于 mobx 的时间旅行状态管理库，它能够让你回溯至历史时刻的状态，从而方便地进行调试和状态管理。相较于 Redux 的类似机制，mobx-delorean 更加轻量且易于上手。
2. 安装
使用 npm 进行安装：
npm install mobx-delorean
3. 使用
3.1 创建 Store
mobx-delorean 在创建 store 时需要继承其提供的 AbstractStore 类，并在构造函数中中定义一个初始状态：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
----- ------- ------- ------------- -
------------- -
--------
---------- - -
-------- --
--------- --
--
-
-此处定义的 MyStore 中包含两个状态，一个是 counter，另一个是 messages，其中 messages 初始值为空数组。
3.2 修改状态
在 mobx-delorean 中，修改状态只能通过提交 actions 的方式进行，这是为了方便管理状态的变更历史。
我们需要在 store 中定义一个 action，比如这个例子中我们定义一个名为 increment 的 action：
-- -------------------- ---- -------
----- ------- ------- ------------- -
------------- -
--------
---------- - -
-------- --
--------- --
--
-
----------- -
---------------- ------- -- -- -- -------- ------- - - ----
-
-这个 increment 方法会将 counter 加 1。
3.3 回溯状态
mobx-delorean 中最重要的特性就是时间旅行了。我们可以使用 devtools 插件很方便的回溯状态。
我们需要在我们的 store 中引入 enableTimeTravel 和 devtools 方法，然后注册我们的 store，在开发过程中可以结合浏览器插件来使用：
-- -------------------- ---- -------
------ - ---------------- - ---- ----------------
------ - -------- - ---- ----------------
----- ------- ------- ------------- -
------------- -
--------
---------- - -
-------- --
--------- --
--
-------------- - --------------------------
-----------------------
-
-
----- ----- - --- ----------
----------------
------------ - ------
------ ------- ------上面的代码中，我们调用了 enableTimeTravel(this) 来启用时间旅行机制，devtools 方法来启用浏览器插件，具体使用示例见下面：
我们可以看到，下图展示了 store 中所有状态的变化历史，可以按照时间顺序回滚到某个时间点的状态，大大方便了开发和调试。
3.4 使用 Action 执行状态变更
在 mobx-delorean 中，我们只能通过执行中间 action 方法来更新状态变量：
store.increment();
上述代码将会使 increment 方法内的逻辑得到执行，并且获得一个新的状态值，同时产生一条新的状态变更记录。npm 包 mobx-delorean 使用教程
4. 总结
mobx-delorean 是一款非常实用的状态管理库，特别是对于需要进行状态回滚与调试的开发人员，它极大的方便了开发任务。本文简要介绍了它的主要用法，并包含了示例代码，希望对您有所帮助。如果想要深入学习 mobx-delorean，可以访问其官方文档获取更多内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc281e8991b448dd1a9