react 接口使用MobX

一、安装

npm install --save mobx
// 根据自身情况安装
npm install --save mobx-react-lite   //仅支持函数组件
//npm install --save mobx-react      //支持类组件/函数组件

二、接口/仓库

// store.ts
import { makeAutoObservable, runInAction  } from "mobx"
import { api } from "../../config/api"

class Store {
    userInfo?: any; //用户信息

    constructor() {
        this.initStore();
        makeAutoObservable(this); // 自动推断定义变量和函数
    }

    //初始化
    initStore() {
        this.userInfo = null;
    }
    
    //获取信息
    getUserInfo(data: any) {
        return api({
            url: '/api/user/log',
            method: 'get',
            params: data
        }).then((res: any) => {
            runInAction(() => { // 异步修改仓库数据
                this.userInfo = res;
            })
        })
    }
}

export default Store;

三、页面使用

//组件
import Store from '../../store'
import { observer } from "mobx-react-lite"

// observer 用于监听仓库数据变化
export default observer(() => {
    // 只初始化一次，后续不再加载, 用于获取用户信息等
    const initStore = new Store(); 

    // 每次页面加载都会初始化清空仓库，用于列表、详情等数据调用
    //const [initStore] = useState(()=>{ return new Store()}); 

    const {
        userInfo = null,
    } = initStore;
    
    const [info, setInfo] = useState([]);
    
    //调用接口
    useEffect(() => {
        initStore.getUserInfo(); 
    }, [])

    // 监听任务列表信息数据是否变化
    useEffect(() => {
        if (userInfo != null) {
          setInfo(res)
        }
    }, [userInfo])
})