首先主要讲了两种实现mobx的东西
一种是原生的实现方式一种是装饰器来进行实现 我看完视频后感觉用装饰器来写的话会少很多代码比较简单 首先需要配置package 因为需要用到es7
配置文件
[
"@babel/plugin-proposal-decorators",
{
"legacy": true}],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true}
]
=====ESLint 配置
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true
}
}
在我们配置完成之后就可以进行mobx操作
首先建立一个store的文件 来进行状态的管理
- store-> index.tsx
import {
observable,
action,
computed
} from 'mobx'
我们需要使用 observable,action,
observable举个例子就是 state={}这种定义变量的东西 而action 是方法
@observable todos = [] 前面加@来进行定义 然后自己 我们来对这个todo进行操作 和普通的函数没有区别 @action addTodo(todo) { this.todos.push(todo) }
//然后我们要给这些东西转成实例
const store = new XXX()
export default store
然后在想要做改变的页面引入
- index.tsx
import {
inject,
observer
} from 'mobx-react'
-
inject是用来注入,observer是用来检测
-
@inject ('store') @observer
-
在class 里面假如需要store里的数据的话
let { store } = this.props 就可以得到store文件里所有的值和方法
如果想使用store里的方法就可以
store.addTodo("这里可以传值")
如果想要每个页面都能得到store的话
在最外面里写 import {provider} from 'react-mobx'
在class 里用provider包裹住 就行了
