Usando mobx para la gestión del estado de los datos en reaccionar/reacthook

mobx
:Gestión de estado simple y escalable

​​

Durante el proceso de desarrollo, a menudo tenemos algunos atributos y métodos que deben usarse en varias páginas. Podemos usar mobx no solo para simples transferencias de componentes padre-hijo. Personalmente entiendo que se puede comparar con vuex en vue. mobx es Se usa en relación con redux. Es más simple y conveniente. Hablemos sobre cómo usarlo directamente.

1 - Instalación

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

2 - Configurar el archivo de la tienda

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-Uso en la página

//引入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);

​¡Asegúrate de recordar al último observador! !

De esta manera, puedes usar mobx para la gestión y el almacenamiento de datos, luchando contra todos.