前言
在前端开发中，状态管理是非常重要的一环。mobx 是一种流行的 JavaScript 状态管理库，可以大大简化状态管理的代码。在 mobx 进行状态更新时，如果想要了解状态更新的变化，可以使用 mobx-remotedev 工具。
什么是 mobx-remotedev
mobx-remotedev 是一款 mobx 的调试工具，能够记录 mobx 的状态更新变化，并在浏览器的 remotedev 工具上实时展示。remotedev 工具还提供了时间旅行功能，可以查看状态的历史更新情况。
安装
使用 npm 在项目中安装 @hlhr202/mobx-remotedev:
npm install @hlhr202/mobx-remotedev
使用方法
初始化
在 mobx 实例上使用 initRemotedev 方法进行初始化：
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - ------------- - ---- --------------------------
----- ----- - ------------
-------- --
----------- -
---------------
--
---
-------------------- - ----- ------------- ---在 initRemotedev 方法中第一个参数传入要使用的 mobx 实例，第二个参数为配置项，可以指定 store 的名称。
与 remotedev 工具连接
需要在网页中安装 remotedev 工具，Chrome 浏览器可以通过扩展程序安装。
安装好后，打开浏览器控制台，在 Application -> Local Storage 中点击选项卡，可以看到一个名为 remotedev 的 key-value 对象。该对象包含了 remotedev 工具的配置信息，可以通过将该对象中的 hostname 和 port 字段设置为与浏览器上的 remotedev 工具中一致的值，即可实现与 remotedev 工具的连接。
设置特殊行为
可以通过 @mobxRemotedevIgnore 装饰器忽略特定的 mobx 动作，并在 remotedev 工具中不展示这些动作的日志。
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - -------------- ------------------- - ---- --------------------------
----- ------- -
--------------------
------------------- -
-- --------- --------- -
-
-
----- ----- - --- ----------
---------------------代码演示
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - ------------- - ---- --------------------------
----- ----- - ------------
-------- --
----------- -
---------------
--
---
-------------------- - ----- ------------- ---
-- -----------
------------------
------------------
------------------
------------------总结
mobx-remotedev 是一种方便的调试工具，可以为开发者提供轻松的状态管理。使用该工具可以大大简化状态管理代码，并且提供实时的状态更新展示，极大的方便了开发者的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f79238a385564ab6999