介绍
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