mobx 入门

observable（可观察的数据）

boservable 是一种让数据的变化可以被观察的方法

数组

import { observable, isArrayLike } from 'mobx'

const arr = observable(['a', 'b', 'c']);

// 观察之后，数组将不是真正的数组，而是一个Observable数组
console.log(arr, Array.isArray(arr), isArrayLike(arr); // ObservableArray false true

// 但是可以依然像数组一样操作数据
console.log(arr[0]); // a
console.log(arr.pop()) // c

对象

const obj = observable({a: 1, b:2});

// 返回的也不是纯对象，而是一个被转化的可被观察的对象
console.log(obj) //ObservableObjectAdministration

// 同样也可以直接对该对象进行读取
console.log(obj.a, obj.b) // 1 2

// TODU: mobx只能对已有的属性进行监视，so，在初始化的时候添加可被监视的属性，如果有倔脾气的童鞋，我就要新添加的属性进行监视，你能不能行？笑话，男人怎么能被说不行呢。如果要调用新添加的属性呢，使用extendObservable()

Map集合

const map = observable(new Map());

// 同样也是转化之后的，可被观察的map
console.log(map) //ObservableMap

// 同样也可以直接调用map方法
map.set('a', 1);
console.log(map.has('a')); // true

map.delete('a');
console.log(map.has('a')); // false

Number、String、Boolean

// Number、String、Boolean原始数据类型需要用observable.box()来包装可被观察的变量。
var num = observable.box(20)
var str = observable.box('hello')
var bool = observable.box(true)

console.log(num, str, bool); // 三个都是可被观察的ObservableValue类型
// 如果要用到原始类型值，需要用observable.get()
console.log(num.get(), str.get(), bool.get()) // 20 'hello' true

// 如果想要修改原始类型值，需要用observable.set()
num.set(50);
str.set('world');
bool.set(false);
console.log(num.get(), str.get(), bool.get()) // 50 'world' false

使用修饰器