简介
mirrorx-persist 是一个基于 mirrorx 的状态管理框架的扩展，旨在提供一种简单的方法，以便在单页面应用（SPA）中长期保存一些持久化数据，例如登录信息等。mirrorx 是一个基于 React 的状态管理库，它的目标是提供一个易用的状态管理方案来解决 React 应用的问题，同时也是 inspired by Redux 等工具的一些想法和实践。mirrorx-persist 正如它的名字所暗示的那样，它为 mirrorx 库提供了持久化的存储机制，它将状态存储到本地存储（Local Storage），以便您的应用程序可以长期保存状态信息。
安装
如果您使用 npm，可以使用以下命令来安装 mirrorx-persist:
npm install mirrorx-persist
如果您使用 yarn，可以使用以下命令来安装 mirrorx-persist:
yarn add mirrorx-persist
如何使用
首先，在您的应用中引入 mirrorx-persist：
-- -------------------- ---- ------- ------ ------- - -------- ------- - ---- ---------- ------ ------- ---- ------------------ -- ------------ ----- ----- - - -- --- -- -- - ------- --- ------ - ------------------ -- ------ --------------------
持久化 store 对象
您可以使用 persistStore 函数来创建持久化 store 对象：
import { persistStore } from 'mirrorx-persist';
const store = mirror.getStore(); // get mirrorx store instance
persistStore(store, ['auth']); // 传入应持久化记录的存储键名在此代码中，您需要调用 mirror.getStore() 方法来获取 mirrorx 库之前创建的 store 对象。然后，您就可以使用 persistStore 方法，让 mirrorx-persist 帮助您创建一个持久化的 store 对象。在这里，我们传递了一个数组，来告诉 persistStore 哪些 mirror 中的 store keys 应该被持久化。同时，每个被传递的键都应该与您的 mirror reducers 中对应的键一致。
白名单和黑名单
mirrorx-persist 支持 whiteList 和 blackList，以更细粒度地控制哪些 state 变量数据被存储和哪些不会被存储。
blackList 通常用于设置不希望被 mirrorx-persist 持续性存储的 store 数据， whiteList 与 blackList 相反，只持久化 store 中指定的数据。
在使用 whiteList 和 blackList 的时候，可以在初始化 mirrorx-persist 的时候进行传入：
import persist from 'mirrorx-persist';
persist({
key: 'root',
storage: localStorage,
whitelist: ['auth'],
blacklist: ['products'],
})(mirror);版本号迁移
会出现这样的情况：您首先发布了您的应用程序，并添加了一些新的状态变量存储到 local storage 中。然而，在后续的更新中，您可能会删除或重命名一些变量，导致现有环境存储的变量已经过时。因此，您需要确定如何从现有版本迁移到新版本。这就是版本迁移所涉及的事情。
您可以使用对 mirrorx-persist 的访问来定义版本号，并管理版本迁移。初始化时，您可以为 persist 方法传递一个对象，该对象可以包含有效值的 version 属性，例如：
-- -------------------- ---- ------- ------ ------- ---- ------------------ -- ------- ----- ------------ - -- ----- ------------- - - ---- ------- -------- ------------- -------- - -- -------------------------------
一旦您设置了版本号，您可以编写 improveState 函数来处理 store 的 migrations，例如：
-- -------------------- ---- -------
----- ------------- - -
---- -------
-------- -------------
-------- --
----------------- -
------ -------------
--
-------- ----- -- -
-- ------ -- ------------- - -- -
-- -- ----------
------------- - --
-
------ -----------------------
-
--在这里，我们实现了 migrate 函数。在每次检索保存的状态之后，mirrorx-persist 将调用此函数来处理 migrations。我们只需要检查存储的 state 对象的版本号是否小于当前版本号，如果小于需要执行 state 迁移。在这种情况下，我们将版本号在 state 中更新为 2。您可以根据实际需求决定需要更改哪些 store state，修改哪些数据。最后，我们需要确保将我们的 state 数据返回为 Promise，以便 mirror 可以检测异步任务的执行完毕。
示例代码
以下是一个示例项目。它将演示如何在 mirrorx 应用中使用 mirrorx-persist。
-- -------------------- ---- -------
------ ------- - -------- ------- - ---- ----------
------ ------- ---- ------------------
----- ------------ - - --------- ------ --------- ---- --
----- --------- - -
----- -------
-------------
--------- -
------------ --------- -
------ - --------- ----- -------- --
--
-------- -
------ -------------
-
-
--
---------
---- -------
-------- -------------
---------- ---------
-------- ----- -- -
-- ------ -- ------------- - -- -
--------------- - -------
------------- - --
-
------ -----------------------
-
-----------
------------------------
----- -------- - ---------- ---- -- -- --
----
--------- -- -
----- - ---- - - ------
----- - --------- -------- - - -----
----- ----------- - -- -- -
-- ---------- -
----------------------
- ---- -
--------------------
----- ----------
------ ---------------------
---
-
--
------ -
-----
-------- ---------
--------- - -
-----
----------- ---------------------
------- ------------- ----------------------
------
---------
------
- - -
-----
------ --- --- ------ -------
------- ------------- ----------------------
-----
---------
------
--
------
--
---
----------------------- ----总结
mirrorx 是一个以 React Redux 为基础模型进一步封装的状态管理库，其主要优势是使用起来相对更简单方便，目前已经在国内一些知名企业的 Web 项目中广泛使用。而 mirrorx-persist 的出现，则为 mirrorx 应用程序的持久化存储提供了一种简单、快速的解决方案，同时支持版本控制、黑白名单等等功能，可在不引入额外依赖的情况下快捷地实现 store 数据的持久存储，符合一致的 API 设计，整合了多个 Web 存储API，客户端轻松实现存储方案，并提供开放的 API 接口，极具可扩展性。了解并掌握 mirrorx-persist 的使用技巧，将会为我们的 Web 项目提供很大的便利性，推动 Web 项目的发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005625e81e8991b448df9c8