记录工作中的日常(Mobx的使用)

148 阅读1分钟

mobx的含义

简单 可扩展的状态管理工具 简单来说,Mobx可以很好的管理应用程序的状态、数据,同时又简单 易扩展

如何请求接口

在services中调用接口 前提是要引入request request.js封装的axios 引入之后请求接口的方式 第一种 使用post请求接口

export const aaa = async (data) => {
  try {
    return await request.post(`/aaa`, data);
  } catch (error) {
    return error;
  }
};

第二种使用get直接请求接口

export const bbb = async (params) => {
  try {
    return await request.get("/bbb");
  } catch (error) {
    return error;
  }
};

第三种使用get请求接口的方式

export const ccc = async (params) => {
  try {
    return await requestAnimationFrame.get(`/ccc?fans=${params}`);
  } catch (error) {
    return error;
  }
};

第四种使用get请求接口

export const ddd = async (params) => {
  try {
    return await requestAnimationFrame.get("/ddd", { params });
  } catch (error) {
    return error;
  }
};

如何获取接口返回来的数据

第一种post请求

fetchAaa = async (data) => {
  const res = await aaa(data);
  const { code, data, msg } = res;
  if (code == 0) {
    // 可以进行提示
    runInAction(() => {
      // 判断返回的msg信息
    });
  } else {
    Loader.error(res);
  }
};

第二种get请求的

fetchCcc = async (params) => {
  const { code, data, msg } = await ccc(params);
  if (code == 0) {
    runInAction(() => {
      if (params == 1) {
        // 进行赋值
      } else {
        // 进行赋值
      }
    });
  }
};

如何在页面中获取数据

第一 :引用这个store

import myStore from './store'; //不是唯一的得看你的store是在哪个文件夹下面

第二 :

可以在点击事件中调用它 也可以在useeffect中调用它

调用时也有两种方式

 const store = myStore;
 const {fetchCcc} = store;
 fetchCcc() 
 const store = myStore;
 myStore.fetchCcc(()

Mobx官网链接👇

cn.mobx.js.org/