官方文档镇楼 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挂钩
踩坑:
脱坑: 在根组件下注入 所有有用到的 store