介绍
MobX 是一个简单、可扩展的状态管理库，而 ngx-mobx 则是一个适用于 Angular 项目的 MobX 封装库，提供了一种更加方便和简单的方式来管理 Angular 应用程序的状态。在本文中，我们将介绍如何在 Angular 项目中使用 ngx-mobx，包括安装、导入、使用和示例代码。
安装
要安装 ngx-mobx，您需要执行以下命令：
npm install ngx-mobx --save
导入
要使用 ngx-mobx，您需要将 NgxMobxModule 导入到您的 Angular 应用程序中。您可以将它添加到您的 app.module.ts 文件中：
-- -------------------- ---- -------
------ - ------------- - ---- -----------
-----------
-------- -
-------------
--
-- ---
--
------ ----- --------- - -使用
创建 Store
首先，您需要创建一个 Store，它将存储您的应用程序的状态。您可以使用 Angular 的 @Injectable 注解来创建一个 Store，并且通过提供 providedIn: 'root' 来声明为应用程序级别的服务。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ---------------
-------------
----------- ------
--
------ ----- ------------ -
----------- ----- - --
----------- -
-------------
-
----------- -
-------------
-
-在此示例中，我们创建了一个 CounterStore，它具有一个名为 count 的可观察属性，以及两个方法 increment 和 decrement，它们分别增加或减少 count。
使用 Store
要使用存储器，我们需要注入它，然后将其传递给我们的组件。您可以使用 @inject 注解来注入存储器，如下所示：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ - ---- -------------------
------ - ------ - ---- ---------------
------------
--------- --------------
--------- -
-----
------ ------------------ -------
------- ----------------------------------------
------- ----------------------------------------
------
-
--
------ ----- ---------------- -
--------------------------------- ------ ------------- ------------- - -
----------- -
------------------------------
-
----------- -
------------------------------
-
-在此示例中，我们创建了一个 CounterComponent，它注入了 CounterStore 并在模板中显示 count 属性。我们还有两个按钮来执行 increment 和 decrement 方法。
示例代码
下面是一个简单的示例，其中使用了 ngx-mobx 和存储器来管理输入框的值，以及计算器的增量和减量。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- -------- - ---- ---------------
------ - ------ - ---- ---------------
-------------
----------- ------
--
------ ----- ------------ -
----------- ----- - --
----------- -
-------------
-
----------- -
-------------
-
-
-------------
----------- ------
--
------ ----- ---------- -
----------- ----- - ---
---------
--- --------- -
------ ----------------- - --
-
-
------------
--------- -----------
--------- -
-----
------------ -- ------------------ -------
------- -----------------------------------------------------
------- -----------------------------------------------------
------
-----
--------- ------ -- ---------------- -------
------ ------------------------------ --
-- --------------------------------- -- --- ---------
------
-
--
------ ----- ------------- -
------------
--------------------- ------ ------------- -------------
------------------- ------ ----------- ----------
- - -
-在此示例中，我们创建了两个 Store，一个用于计数器，另一个用于输入框。我们还在组件中使用了这些存储器，以便在模板中使用和更新它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671e81e8991b448e3825