Mobx 数据通信

安装

npm i mobx

1. 可以观察一个数据类型,当所观察的数据类型发生变化的时候,才会触发 autorun 方法

相关方法

1. observable.box() : 观察基本数据类型.
   • 获取观察的数据类型, 需要通过 .get() 来获取观察的数据
2. observable.map() : 观察复杂数据类型.
   • 获取观察的数据,通过 .get() 来获取观察的数据.
3. observable() : 观察复杂数据类型.
   • 直接通过 obj.属性 来获取观察的对象.
4. autorun(()=>{}) : 当所观察的属性发生变化的时候就会触发该函数.(初始化的时候也会触发一次)

import { observable, autorun } from "mobx";

// 基本数据类型:
var number = observable.box(10);
var name = observable.box.('coco')


// autorun 函数,初始化的时候触发触发一次,之后每当观察的属性发生变化的时候,都会触发该函数
autorun(() => {
  number.get();
});

autorun(()=>{
  name.get()
})

// 复杂数据类型

方法一:
var obj = observable.map({
  name:'coco',
  age:10,
})

方法二:

var obj2 = observable({
  name:'ike',
  age:18,
})

// 获取复杂数据类型

获取方式一:
autorun(()=>{
  obj.get('name')
})

获取方式二:
autorun(()=>{
  obj.name
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

react 项目初体验mobx

1. 创建一个 store.js 文件
2. 在需要通讯的组件中引入 该组件.

注意:不建议再 observable之外修改 数据.

store.js文件:
import {observable} from 'mobx'

const store = observable({
  name:'coco',
  age:16,
  show:true,
  address:'郑州市'
  changeShow(){
    this.show = false
  }
  changeHide(){
    this.show = true
  }
},{
  changeShow:action,
  changeHide:action
})

export default store

通信组件:
import store from './store'
import {autorun} from 'mobx'

componentDidmount(){
  autorun(()=>{
    console.log(store.name)
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31