npm 包 Pelorus 使用教程

阅读时长 6 分钟读完

简介

Pelorus 是一个用于管理 web 应用程序状态的简单 JavaScript 库。它的设计理念是“渐进式地管理你的状态”,也就是说你可以在不同的组件中随时引入 Pelorus 并使用它进行状态管理。Pelorus 提供了状态“装载”、“更新”、“卸载”等基础功能,并支持多种存储、常见语法和异步状态的处理。

安装

你可以通过 npm 进行安装:

示例

装载

Pelorus 像其他一些状态管理库一样,可以帮助你追踪各个组件的状态。首先,让我们安装并初始化一个 Pelorus 实例:

这里我们创建了一个空的 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

纠错
反馈