安利一个好用的 npm 包 mobx-combiner

阅读时长 4 分钟读完

介绍

mobx-combiner 是一个可以更方便地将不同 store 合并起来的 npm 包,妈妈再也不用担心我把 store 处理得一塌糊涂了。

安装

使用 npm 安装:

使用教程

首先引入 mobx 和 mobx-combiner:

然后我们可以创建一些 store,例如这个示例中我们创建两个 store:

-- -------------------- ---- -------
----- ------------ -
  ----------- ----- - -

  -------------
  ----------- -
    ------------
  -

  -------------
  ----------- -
    ------------
  -
-

----- --------- -
  ----------- ---- - ------
  ----------- --- - --

  -------------
  ------------- -
    --------- - ----
  -

  -------------
  ----------- -
    -------- - ---
  -
-

----- ------------ - --- --------------
----- --------- - --- -----------

然后我们可以使用 combiner 函数将这两个 store 合并为一个:

现在我们就可以在组件中使用这个合并后的 store,例如:

-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - --------- ------ - ---- ------------

------------------ -------
---------
----- ----------- ------- --------- -
  -------- -
    ----- - -------- ---- - - ----------
    ------ -
      -----
        ------- --------------------------------------
        ----------------------------
        ------- --------------------------------------
        --- --
        ------------------
        ------
          -----------
          -----------------
          ----------- -- -----------------------------
        --
        ------------------
        ------
          -------------
          ----------------
          ----------- -- --------------------------------------
        --
      ------
    -
  -
-

深度解析

我们使用 mobx-combiner 的过程中,其实是在使用 mobx 的 observable 和 computed。我们创建的每一个 store 类,都使用 @observable 修饰属性,这样就能够使用 mobx 进行响应式。

mobx-combiner 将不同 store 合并成一个新的 store,是基于 mobx 的 computed 特性实现的。在我们使用 combiner 函数时,它会遍历传入的 store 对象,将每个属性转化为 computed,这样每个属性就能够在修改时通知到组件进行渲染。

结语

mobx-combiner 是一个非常方便的 npm 包,它让我们更容易地将不同 store 合并起来,让代码更清晰易懂。在实际项目中,我们通常会使用多个 store,这个时候就可以使用 mobx-combiner 将多个 store 合并为一个。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005600b81e8991b448ddda8

纠错
反馈