在 Angular 应用中使用状态管理工具 NGXS 时，我们时常需要将一些状态信息存储在浏览器的本地 Storage 中，以便实现数据的持久化。而 npm 包 @ngxs/storage-plugin 就是为此而生的解决方案。
@ngxs/storage-plugin 提供了一套清晰易用的 API，使我们能够快速地将状态信息存储在浏览器的本地 Storage 中，同时还能够实现状态信息的自动化更新和数据一致性的保证。
在本教程中，我们将详细介绍如何使用 @ngxs/storage-plugin 在 Angular 应用中进行状态管理。
安装
我们首先需要安装 @ngxs/storage-plugin，并在应用中导入和配置它。
npm install @ngxs/storage-plugin --save
配置
在要使用 @ngxs/storage-plugin 的状态类中，为其添加 @StateStorage 装饰器，以告诉 @ngxs/storage-plugin 需要对该状态进行存储管理。
-- -------------------- ---- -------
------ - ------ ------------ - ---- --------------
------ - ------------ - ---- -----------------------
-----------------
----- ----------
--------- -
------ -
-
--
---------------
---- ----------
---- ----
--
------ ----- ------- -
-- ---
-在示例中，我们为 MyState 类添加了 @StateStorage 装饰器，并在其中指定了 key 和 ttl 两个参数。
key 参数指定了存储在本地 Storage 中的键名，而 ttl 参数则指定了数据的过期时间。当数据过期时，@ngxs/storage-plugin 会自动删除过期数据。
使用
当我们需要对状态进行存储和读取时，只需要通过 StateContext 对象中的 setState 和 getState 方法即可。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ ------------ - ---- --------------
------ - ------- - ---- -------------
------------
--------- ---------
--------- ------- -- ----- ---
--
------ ----- ------------ -
------------------- ------ ------ --
--- ------- -
------ -----------------------------------------
-
----------- -
----------------------- -------------------
-
----------- -
----------------------- -------------------
-
--- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- ------ ------------ - ---- --------------
------ - ------- - ---- -------------
------ ----- --------------- -
------ -------- ---- - ---------- -----------
-
------ ----- --------------- -
------ -------- ---- - ---------- -----------
-
-------------
----------- ------
--
-----------------
----- ----------
--------- -
------ -
-
--
------ ----- -------------- -
------------------- -------- ---------------------- --
------------------------
-------------- ---------------------- -
----- ----- - ---------------
----- -------- - - --------- ------ ----------- - - --
-----------------------
-
------------------------
-------------- ---------------------- -
----- ----- - ---------------
----- -------- - - --------- ------ ----------- - - --
-----------------------
-
-在示例代码中，我们通过 store.selectSnapshot() 方法获取了 MyState 中的 count 属性，并通过 store.dispatch() 方法分别对 MyState 进行增加和减少的操作。
总结
@ngxs/storage-plugin 是一个非常有用的状态管理工具，通过它可以让我们方便地将状态信息存储在本地 Storage 中，并且自动化地进行更新和保证数据一致性。本文介绍了如何在 Angular 应用中使用 @ngxs/storage-plugin，并提供了详细的代码示例，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaea1b5cbfe1ea0610e93