mobx

作者: 笑笑_hhh | 来源:发表于2019-08-05 16:29 被阅读0次

    官方文档镇楼   https://cn.mobx.js.org/refguide/computed-decorator.html

     mobx  是用来管理 状态的, 以类的形式来你的组件所需的数据, 调用action 改变store

    正文从这里开始:

    1,npm i mobx mobx-react -D

    2, mobx 中用到了 装饰器, 
          tips:  装饰器是一个函数, 可以用来装饰整个类(也就是说类或者类的实例是可以用到装饰器里面的属性或者是方法的)

    所以要启用修饰器 babel 支出es7中的修饰器语法
         babel-plugin-transform-decorators-legacy 
         @babel/plugin-proposal-decorators
    装这两个包+ 在项目中配置 babel

    Tips:    跑项目的时候有遇到过的报错: Support for the experimental syntax 'decorators-legacy' isn't currently enabled,
            加上babel配置即可。

    3, mobx中的 几个常用到的api  
      @observabel    ----------   在状态(state) 中加上这个  则代表这个值是可以被mobx 所监听到的

      @computed values   (可以先理解为是用来 '计算',得值或者取值,就是你要得到某个值,是依赖于state,然后又需要被observa)

           @action      动作,就是你写一些逻辑的地方
                 作用就是  可以用来改变 observabel  也可以说成是改变state

      暂时就了解到这么多  未完待续

    ------------------------------------------  华丽的分割线 --------------------------------------------

    demo

    a,   类的写法, 实例这个类,得到一个对象

    对比redux, 在mobx中不需要去写 action关键字以及各种 reduer去得到一个新的state。

    在mobx 中 不需要去关心数据怎么存起来 mobx 会自己帮你做了

    -------------------------------------    华丽的分割线---------------------

    mobx-react
     项目中要是用到了mobx  那是有百分之90能看见这个包的

    mobx-react 中的  inject()
    inject是一个高阶组件,作用是将组件连接到提供的stores。具体说是与Provider结合使用,从Provider提供给应用的state数据中选取所需数据,以props的形式传递给目标组件
    ps:  这里的inject()   让我想到了  dva中的 connect   
    两者都可以做到  组件与state挂钩

    踩坑:

    老是说需要一个 provided 然后就给他一个provider, 结果还是扑街了 还是报同样的错

    脱坑: 在根组件下注入 所有有用到的 store

    相关文章

      网友评论

          本文标题:mobx

          本文链接:https://www.haomeiwen.com/subject/omcmdctx.html