介绍
mobx-combiner 是一个可以更方便地将不同 store 合并起来的 npm 包，妈妈再也不用担心我把 store 处理得一塌糊涂了。
安装
使用 npm 安装：
npm install --save mobx-combiner
使用教程
首先引入 mobx 和 mobx-combiner：
import { observable, action } from 'mobx'
import combiner from 'mobx-combiner'然后我们可以创建一些 store，例如这个示例中我们创建两个 store：
-- -------------------- ---- -------
----- ------------ -
----------- ----- - -
-------------
----------- -
------------
-
-------------
----------- -
------------
-
-
----- --------- -
----------- ---- - ------
----------- --- - --
-------------
------------- -
--------- - ----
-
-------------
----------- -
-------- - ---
-
-
----- ------------ - --- --------------
----- --------- - --- -----------然后我们可以使用 combiner 函数将这两个 store 合并为一个：
const store = combiner({
counter: counterStore,
user: userStore
})现在我们就可以在组件中使用这个合并后的 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