在Ionic框架中，Angular和ngrx是构建响应式和可扩展的应用程序的关键技术。同时，存储是所有应用程序的关键部分。 @edcarroll/ngrx-ionic-storage npm包提供了在Ionic应用程序中使用ngrx的简单方法。 它利用@ionic storage进行本地存储，并使用ngrx作为应用中管理状态的方案。 本文将介绍如何使用此npm包，以及如何为Ionic应用程序提供应用状态管理。
安装
首先，如果尚未安装Ionic，请通过npm安装Ionic：npm install -g ionic。
要在Ionic中使用此npm包，您需要在应用程序项目中执行以下命令：
npm install --save @ngrx/store @ngrx/effects @edcarroll/ngrx-ionic-storage
配置
要在Ionic中使用@edcarroll/ngrx-ionic-storage npm包，您需要在应用程序中添加特定配置。 首先，在您的应用程序module文件中添加引用：
import { StorageModule } from '@edcarroll/ngrx-ionic-storage';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';然后，在@NgModule装饰器中添加配置（以Store和Effects为例）：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
----------------------
-----------------
------------------------
--------------------------
----------------------- ---- ------ ---
--
---------- --------------
--在这里，我们将应用程序的状态配置为ngrx存储和影响，同时使用我们的本地存储作为@edcarroll/ngrx-ionic-storage npm包的配置。
使用
通过配置，我们已经将本地存储集成到Ionic应用程序中，并使用ngrx作为状态管理工具。 现在，让我们来看一下如何在应用程序中使用此npm包。
在组件中，我们需要将我们的存储添加到constructor中：
constructor(public store: Store<any>) {}现在，我们可以使用该存储在应用程序中管理状态（注意，这是一个简单的示例）：
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
--------- -------- -
--------- -------
-
------------
--------- -----------
------------ --------------------
--
------ ----- ------------ -
---------- -------------------
------------------ ------ ---------------- -
-------------- - ----------------------- -- ----------------
-
--------------------- ------- -
--------------------- ----- --------------- -------- -------- ---
-
-在这里，我们创建了一个名为AppState的接口，该接口描述了应用程序状态的结构。 我们通过store.select选择要使用的状态，以及store.dispatch将更改提交给它。
示例代码
下面是一个完整的示例代码，演示了如何在Ionic应用程序中使用@edcarroll/ngrx-ionic-storage npm包。 请确保在Configuration和使用中进行正确的npm包和配置。
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- --------------------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
--------- -------- -
--------- -------
-
-----------
------------- -
------------
--
-------- -
--------------
----------------------
-----------------
------------------------
--------------------------
----------------------- ---- ------ ---
--
---------- --------------
--
------ ----- --------- --
-- ----------------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
--------- -------- -
--------- -------
-
------------
--------- -----------
------------ --------------------
--
------ ----- ------------ -
---------- -------------------
------------------ ------ ---------------- -
-------------- - ----------------------- -- ----------------
-
--------------------- ------- -
--------------------- ----- --------------- -------- -------- ---
-
-
-- ------------------
------------
-------------
-----------
----- ---
------------
--------------
-------------
-------------
----------
---------- -----------------------------------
-----------
----------- ------------------------------- ------------------ ---------------------
------------ -- ---------- - ------ -- ---- ---- ------
--------------结论
在Ionic应用程序中，使用ngrx进行状态管理和@ionic storage进行本地存储是必须的。 @edcarroll/ngrx-ionic-storage npm包为我们提供了不断优化的途径，使我们能够使用ngrx进行状态管理，并在后台使用本地存储。 本文介绍了如何安装和配置此npm包，并提供了完整的示例代码。 通过使用此npm包，您可以轻松管理Ionic应用程序的状态和存储。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd2a0
