react/reacthook中使用mobx进行数据状态管理

​
mobx：简单、可扩展的状态管理

​​

开发过程中我们经常有一些属性和方法需要多页面使用，不仅仅只是单纯的父子组件传值的这种 我们就可以使用mobx，我个人理解可以类比为vue中的vuex，mobx相对redux来说使用起来更简单方便，我们直接来讲使用方法

1 - 安装

React 绑定库: npm install mobx-react --save

2 - 配置store文件

import { observable, runInAction, makeAutoObservable } from "mobx";

class Normal {
//公共属性，或者可以理解为多页面需要使用的属性
  singlePrice: number = 0.07;
  doublePrice: number = 0.1;
  order = {};
  isNeedPrint: boolean = false;
  eqId: number = 1;

//更改属性的方法
  changeSinglePrice(price: number) {
    console.log("调用了");
    this.singlePrice = price;
  }
  changeDoublePrice(price: number) {
    this.doublePrice = price;
  }
  changeEq(id: number) {
    this.eqId = id;
  }
  setOrder(item: any) {
    this.order = item;
  }
  setNeedPrint(status: boolean) {
    this.isNeedPrint = status;
  }
  clearOrder() {
    this.order = {};
  }
//不要漏了这个
  constructor() {
    makeAutoObservable(this);
  }
}
//导出 new 对象名
export default new Normal();

3-在页面中使用

//引入mobx和store
import store from '../../store/store'
import { observer } from 'mobx-react'
const Setting = () => {
    const changeMachine = (value: string) => {
 
        if (value == 1) {
        //调用的就是store中更改eqid的方法
            store.changeEq(1)
        } else if (value == 2 {
            store.changeEq(2)
        }
    }
//更改single
 const changeSingle = (value: any) => {
 //调用store中的方法
        store.changeSinglePrice(value)
    }
    return (
        <div className={"mt-6"}>
            <div className="flex items-center flex-row mt-5">
                <div className="w-20">单面价格:</div>
                //这里就是调用store中的属性store.singlePrice
                <InputNumber placeholder={store.singlePrice.toString()} className="w-100" onChange={changeSingle} />
            </div>
          
            </div>

        </div>
    );
};

//！！！！重点！！！！！ 一定要记得 observer 组件
export default observer(Setting);

​一定要记得最后的observer！！

这样就可以使用mobx进行数据的管理和存储了，fighting各位