介绍
Cerebral 是一种流程状态管理器。它为 Web 应用程序提供了一个集中式的、可预测的管理状态的方法，并通过进行应用程序中的任何操作来更新状态，可以使应用程序变得更加健壮和可维护。Cerebral 库有很多 provider ，其中 cerebral-provider-storage 用于屏蔽 Web 存储的底层细节，提供了一种简单的方式来在浏览器的本地存储里存储和访问应用程序的状态。
安装
通过 npm 安装 cerebral-provider-storage：
npm i cerebral-provider-storage
使用方法
在使用 cerebral-provider-storage 之前需要安装和配置 Cerebral 库。安装和配置详见 Cerebral 官网。完成配置后，继续如下操作：
-- -------------------- ---- -------
------ - ---------- - ---- -----------
------ -------- ---- --------------------
------ --------------- ---- ----------------------------
----- ---------- - ------------
--------- ----------
----- ----------------
---
---------- -
-----------------
------- -------------------
--
--
------ -
-- ---
--
-------- -
-------- ---
----------- ---
-- ----
-
---配置项
target: 确定要使用的 Web 存储的类型。
StorageProvider({ target: window.localStorage })or
StorageProvider({ target: window.sessionStorage })默认值是 window.localStorage。
sync: 确定某个信号是否应该覆盖存储中的项。如果值为 true，则会将从存储中检索的数据合并到应用程序。
StorageProvider({ sync: true })默认值为 false。
在组件中使用
-- -------------------- ---- -------
------ - ------- - ---- ------------------
------ - ----- - ---- ----------------
------ ------- --------
-
------ ------------
--
-------- ----- ----- -- -
------ -
-----
--------------- -- -
---- --------------------------------
---
------
--
-
--存储和检索状态
在信号中配置存储状态，并在组件中使用 state 获取它们。
-- -------------------- ---- -------
------ - --- - ---- ---------------------
------ - ----- - ---- ----------------
------ - -- ---- ---- ----------
------ ----- ------- - -
-- ---- ----
--------------------------- -
------ -- --- ------
----- -----
--
--
------ ----- ---------- - -
-- ---- --------------- -------
------------ ---
--完整示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ---------- - ---- -----------
------ -------- ---- --------------------
------ - --- - ---- ---------------------
------ - ----- - ---- ----------------
------ - ------- - ---- ------------------
------ --------------- ---- ----------------------------
------ - -- ---- ---- ----------
----- ---------- - ------------
--------- ----------
----- ----------------
---
---------- -
-----------------
------- --------------------
----- ----
--
--
------ -
------ --
--
-------- -
-------- -
-- ---- ----
--------------------------- -
------ -- --- ------
----- -----
--
--
----------- -
-- ---- --------------- -------
------------ ---
-
-
---
----- --- - --------
-
------ ------------
--
-------- ----- ----- -- -
------ -
-----
------- ----------- -- -------------------------------------- -------------
------- ----------- -- ------------------------------------------- --------------
--------------------------- -- -
---- ----------------------------------
---
------
--
-
--
----------- --- ---------------------------------总结
cerebral-provider-storage 这个库非常方便，能够很好的解决 Web 存储的诸多问题，同时它也遵循了 Cerebral 的定义，面向状态管理的功能很强大，而且也很容易上手。当然使用前需要 Sci-Fi 网络，以保证良好使用体验。更多 Cerebral 库的使用方法可参考官方提供的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7740