mobx学习笔记04——mobx常用api

1 可观察的数据(observable) 

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

那些数据可被观察?

-原始类型

String、Number、Boolean、Symbol

-对象

-数组

代码中理解数据是如何被观察的:

1)安装mobx的npm依赖

执行命令:npm i mobx -S

2)在index.js文件中,从mobx包中导入observable函数

import { observable } from 'mobx';

3)通过observable将变量转换为可观察的对象

mobx对任意变量对处理方式有两种:

 -数组、对象以及es6中的map

  直接把observable作为函数来将变量转换为可观察对对象,之后对数组、以及map中的数据进行合理的操作。

  >数组(array) 

import { observable,isArrayLike } from 'mobx';
// import { observable } from 'mobx';
const arr = observable(['a','b','c']);
console.log(arr[0],arr.push('d')); 
//如果直接用observable函数返回的结果不是数组,而引入isArrayLike模块后,返回的就相当于数组,
//可以用一些数组的方法,但注意不能通过数组越界的方式访问或改变数组数据,mobx不会监视越界的访问  

  >对象(object)

import { observable } from 'mobx';
const obj = observable({a:1,b:1});
console.log(obj.a,obj.b); 
//mobx只能对已有的数据进行监视,如果要监视新增加的属性,需要使用mobx提供的extendObservable()方法。
//因此最好在程序初始化的时候就说明所有程序会用到的属性。

  >map

import { observable } from 'mobx';
const map = observable(new Map());
map.set('a',1);
console.log(map.has('a')); 
map.delete('a');
console.log(map.has('a')); 
//和数组类型的类似,返回的结果不是真正的map,但表现的足够接近map,可以调用一些map的方法

 -其他类型

  一些原始类型数据,如String、Number、Boolean等,需要调用observable.box来将变量包装为可观察的对象,之后对该变量的直接赋值将会被监视。

import { observable } from 'mobx';
const num = observable.box(20);
const str = observable.box('Hello');
const bool = observable.box(true);
// console.log(num,str,bool); //返回的是包装好的可被观察到数据
console.log(num.get(),str.get(),bool.get()); 
num.set(1);
str.set('hi~');
bool.set(false);
console.log(num.get(),str.get(),bool.get()); 
//使用get方法得到原始类型的值,使用set方法修改原始类型的值

4)使用decorator修饰器声明可观察对象

decorator只能修饰类或类的成员,因此我们要创建一个类,在该类中使用observable创建可被观察的数据。

mobx为了简化api对observable函数做了手脚,使其能够识别函数当前是被当作普通函数调用还是被当作修饰器调用的,如果是作为修饰器被调用,就自动识别变量类型,并使用不同的包装转换方案。

import { observable,isArrayLike } from 'mobx';

class Store {
	@observable array = [];
	@observable obj = {};
	@observable map = new Map();

	@observable string = 'Hello';
	@observable number = 20;
	@observable bool = false;
} 

2 对可观察对数据做出反应(如何知道对象被修改了?)

3 修改可观察数据

猜你喜欢

转载自www.cnblogs.com/superjishere/p/12091769.html