mobx--react状态管理器

2019-01-07  本文已影响0人  wudongyu

toJS

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;
上一篇 下一篇

猜你喜欢

热点阅读