简介
Pelorus 是一个用于管理 web 应用程序状态的简单 JavaScript 库。它的设计理念是“渐进式地管理你的状态”,也就是说你可以在不同的组件中随时引入 Pelorus 并使用它进行状态管理。Pelorus 提供了状态“装载”、“更新”、“卸载”等基础功能,并支持多种存储、常见语法和异步状态的处理。
安装
你可以通过 npm 进行安装:
npm install pelorus
示例
装载
Pelorus 像其他一些状态管理库一样,可以帮助你追踪各个组件的状态。首先,让我们安装并初始化一个 Pelorus 实例:
import Pelorus from 'pelorus'; const pelorus = new Pelorus({ state: { count: 0, }, });
这里我们创建了一个空的 Pelorus 实例,并且传入了一个 state,表示我们初始化时组件的状态。每个 Pelorus 实例都有一个 state 字段,表示状态数据的哈希表。接下来,我们将状态注入组件:
-- -------------------- ---- ------- ------ - -------- - ---- -------- -------- --------- - ----- ------- ------- - ----------- -- -------------------- ------------------------ -------- -------- ----------- - ------------------------- --- -- -- ------ ------- - - ---- - -------- ----------- - ------------------------- --- -- -- ------ ------- - - ---- - ------ - ----- ---------------------- ------- ------------------------------ ------- ------------------------------ ------ -- -
这里我们使用 React 做为视图框架,使用 useState() 将当前状态和更新器捆绑在一起。然后,我们调用 Pelorus 实例的 mount() 方法,注册该状态的组件。最后,我们将更新器作为参数,在更新状态时根据指定的状态名称获取该组件的所有实例。此时,每次应用更新,组件的状态都会被更新。
状态存储
使用 Pelorus 后,数据状态存储的方式很灵活。你可以存储状态在本地、远程,甚至是在一些云服务等等。这里展示一下如何将状态存储在 localStorage 中:
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ - -------- - ---- -------- ----- ------- - --- --------- -------- -------------------- ------ - ------ - -- --- -------- --------- - ----- ------- ------- - ----------- -- -------------------- ------------------------ -------- -------- ----------- - ------------------------- --- -- -- ------ ------- - - ---- - -------- ----------- - ------------------------- --- -- -- ------ ------- - - ---- - ------ - ----- ---------------------- ------- ------------------------------ ------- ------------------------------ ------ -- -
注意:Pelorus 实例初始化时允许添加 storage 变量,并将当前状态存储在窗口对象的 localStorage 中。此时使用 Pelorus 的状态具有持久性,刷新后将保留它的状态。
异步状态处理
现实世界的应用有很多是由异步请求组成的。Pelorus 实例同样也支持异步请求,只要你愿意。
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ - --------- --------- - ---- -------- ----- ------- - --- --------- ------ - ----- ---- -- --- -------- ----------- - ----- ------- ------- - ----------- -- -------------------- ------------ -- - ----- -------- ----------- - ----- -------- - ----- ---------------------------------- ----- ---- - ----- ---------------- ---------------------- ------ - ------------ -- ---- ------ - ----- ----------- - - -------------------------------- -- ---------------------- - - - --------------------- -- ------ -- -
这里使用 useEffect() 监听当前的状态,并在数据加载期间将状态设置为“Loading...”行文时。当数据加载完成后,使用 pelorus.update() 更新状态数据。这样使得 Pelorus 处理异步状态非常方便。
结论
Pelorus 可能不是最强大的状态管理工具,但它简单、小巧而且容易上手。
使用 Pelorus 可以让你在状态管理方面更高效、更方便。你可以以增量的方式使用它,在不同组件和应用程序间搭起一座稳定的桥梁。如果你刚刚开始学习前端开发,还没有用过状态管理,那 Pelorus 是一个不错的选择。
让我们在开发应用程序时将其纳入范围,并看看它如何帮助我们编写干净、清晰、简易的代码。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600551f181e8991b448cf70a