美文网首页
mobx--react状态管理器

mobx--react状态管理器

作者: wudongyu | 来源:发表于2019-01-07 15:00 被阅读0次

    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;
    

    相关文章

      网友评论

          本文标题:mobx--react状态管理器

          本文链接:https://www.haomeiwen.com/subject/eayurqtx.html