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各位