React后台管理（五）-- 状态管理工具mobx安装以及本项目登录，表格，用户信息状态管理封装使用

---

前言

本章主要讲mobx的使用以及创建登录，用户信息，表格实例

---

一、安装mobx mobx-react mobx-react-lite

npm i -S mobx mobx-react mobx-react-lite

二、创建登录，表格，用户公共信息状态管理

1. 创建登录store文件 login.jsx

功能分析：
封装登录系统hook函数
封装退出系统hook函数
存储用户token等信息

// @/store/login.jsx
// login module
import { makeAutoObservable } from "mobx";
import { getUsername, setUsername, getToken, setToken, removeToken } from "@/utils/storage";
import { loginCode } from "@/api/account"; // api
class LoginStore {
  token = getToken() || "";
  state = {
    token: "" || getToken(), // 用户token
    username: "" || getUsername(), // 用户name
    mobile: "" || localStorage.getItem("mobile"), // 手机号
    role: "" || localStorage.getItem("role"), // 角色
    isAdmin: JSON.parse(sessionStorage.getItem("a")) || false, // 是否超管
    permissions: [], // 权限ID
  };
  constructor() {
    // 响应式
    makeAutoObservable(this);
  }
  // 设置token
  SET_TOKEN(payload) {
    this.state.token = payload;
    setToken(payload);
  }
  // 设置手机号
  SET_MOBILE(payload) {
    this.state.mobile = payload;
    localStorage.setItem("mobile", payload);
  }
  // 设置用户名
  SET_USERNAME(payload) {
    this.state.username = payload;
    setUsername(payload);
  }
  // 设置角色
  SET_ROLE(payload) {
    const role = payload && payload.length ? payload.map((item) => item.roleName).join() : "";
    this.state.role = role;
    localStorage.setItem("role", role);
  }
  // 设置权限
  SET_PER(payload) {
    this.state.permissions = payload;
    localStorage.setItem("p", payload);
  }
  // 设置是否是超管
  SET_ISADMIN(value) {
    this.state.isAdmin = value === "10000";
    sessionStorage.setItem("a", JSON.stringify(this.state.isAdmin));
  }
  // 更新数据
  updateData(data) {
    this.SET_TOKEN(data.token);
    this.SET_MOBILE(data.mobile);
    this.SET_USERNAME(data.userName);
    this.SET_ROLE(data.roleList);
    this.SET_PER(data.permissions);
    this.SET_ISADMIN(data.userId);
    data.resetPwd && removeToken();
  }
  // 登录hook
  loginAction = ({ mobile, code }) => {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await loginCode({ mobile: mobile, verification: code });
        this.updateData(res?.data);
        resolve(res?.data);
      } catch {}
    });
  };
  // 退出hook
  logOutAction = () => {
    return new Promise((resolve, reject) => {
      this.token = "";
      removeToken();
      resolve();
    });
  };
}
export default LoginStore;

2. 创建表格store文件----table.jsx

功能分析：
（1）存储离开的路由地址
（2）存储当前的路由地址
（3）存储表格分页器的页码相关参数，为了处理进入详情返回时定位到之前的分页数据
（4）存储表格当前筛选动作类型：初始化，搜索，重置

// @/store/table.jsx
import { makeAutoObservable } from "mobx";
import Config from "@/config";

class TableStore {
  state = {
    fromPath: localStorage.getItem("fromPath") || "", // 离开的路由
    currentPath: localStorage.getItem("currentPath") || "", // 当前的路由
    page: {
      size: Config.pageSize,
      index: Config.pageIndex,
    }, // 页码
    filterAction: "", // 筛选动作
  };
  constructor() {
    makeAutoObservable(this);
  }
  // 记录离开页面的路由
  SET_FROM_PATH(value) {
    this.state.fromPath = value;
    localStorage.setItem("fromPath", value);
  }
  // 记录当前页面的路由
  SET_CURRENT_PATH(value) {
    const prevPath = JSON.parse(JSON.stringify(this.state.currentPath));
    this.SET_FROM_PATH(prevPath);
    setTimeout(() => {
      this.state.currentPath = value;
      localStorage.setItem("currentPath", value);
    }, 500);
  }
  // 记录筛选动作
  SET_FILTER_ACTION(value) {
    this.state.filterAction = value;
  }
  // 记录页码
  SET_PAGE(value) {
    this.state.page.size = value.size;
    this.state.page.index = value.index;
  }
}
export default TableStore;

3. 创建用户信息store文件----userInfo.jsx

功能分析：
（1）添加runInAction正确追踪和响应数据变化
（2）存储展开收起状态
（3）封装获取用户信息接口函数

// @/store/userInfo.js
import { makeAutoObservable, runInAction } from "mobx";
import { http } from "@/utils";

class UserStore {
  userInfo = {};
  state = {
    collapse: false,
  };
  constructor() {
    makeAutoObservable(this);
  }
  getUserInfo = async () => {
    // 调用接口数据
    const data = await http.get("/api/userInfo");
    runInAction(() => {
      this.userInfo = data;
    });
  };
  setCollapse = () => {
    this.state.collapse = !this.state.collapse;
  };
}
export default UserStore;

4. 所有模块统一引入处理----index.jsx

功能分析：
把所有模块统一管理，实例化根，并导出

// @src/store/index.js
import { createContext, useContext } from "react";
import LoginStore from "./login";
import UserStore from "./userInfo";
import TableStore from "./table";
class RootStore {
  constructor() {
    this.LoginStore = new LoginStore();
    this.UserStore = new UserStore();
    this.TableStore = new TableStore();
  }
}
// 实例化根 导出useStore context
const rootStore = new RootStore();
const context = createContext(rootStore);
const useStore = () => useContext(context);

export default useStore;

---

总结

下一篇讲【mock方案选择以及真实服务器连接】。关注本栏目，会实时更新！