toJS
- 将一个(observable)对象转换为 javascript 结构
observable和autorun
import { observable, autorun } from 'mobx';
const value = observable(0);
const number = observable(100);
autorun(() => {
console.log(value.get());
});
value.set(1);
value.set(2);
number.set(101);
<!-- 依次输出 0-初始化设置 1-set一 2-set二 -->
只有当变化的值处于autorun中时,autorun中的函数会自动执行
computer
const number = observable(10);
const plus = computed(() => number.get() > 0);
autorun(() => {
console.log(plus.get());
});
number.set(-19);
number.set(-1); //plus值仍为false 未发生变化 不会出发autorun函数
number.set(1);
<!-- 依次输出 true-初始化plus变量的值变为true(10>0)、false-变为false(-19>0)、true(1>0) 只有当autorun中观测的数据发生变化时才会出发autorun函数的执行-->
const price = observable(199);
const number = observable(15);
//computed的其它简单例子
const allPrice = computed(() => price.get() * number.get()); //对初始数据进行处理 单价*数量 获取到价格(需要的数据)
//顺便一提,computed属性和React Native中的ListView搭配使用很愉快。
action,runInAction和严格模式(useStrict)
// mobx推荐将修改被观测变量的行为放在action中。
// 来看看以下例子:
import {observable, action} from 'mobx';
class Store {
@observable number = 0;
@action add = () => {
this.number++;
}
const newStore = new Store();
newStore.add();
项目使用
// 注入store中的
@inject("xxx") //引入 xxx.js
@observer
// 声明可观察变量、状态,只有变量至于可观察状态时才会监听到数据的变化
@observer a=false;
// 改变状态
@action issuePopupfun = () => {
this.issuePopup = false
}
// 异步转同步 **异步操作加action 建议对任何修改 observables 或具有副作用的函数使用 (@)action ** =>runInAction 是个简单的工具函数,它接收代码块并在(异步的)动作中执行。这对于即时创建和执行动作非常有用,例如在异步过程中。runInAction(f) 是 action(f)() 的语法糖 ??????
@action CtlPicData = async () => {
// get请求
const { isError, data } = await api.get(
`${reqPrefix}/api/signals/CtlPicData`,
{
// 传递的参数
areaCode,
adcode
}
)
// 不存在错误的情况下
if (!isError) {
runInAction(() => {
// 改变状态
this.statistics_datas.contrast_data3=data.CtlPicData;
})
}
}
// 接收对应store中,需要使用的函数
const{ store }=this.props.xxx;
网友评论