React的mobx配置、使用以及统一封装代码实例详解

1. 安装mobx相关工具

yarn add mobx mobx-react-lite

2.1 若不进行统一管理，直接使用mbox（后面会说统一管理）

新建一个store.js文件夹，下面新建一个count.js文件

//引入
import { makeAutoObservable } from "mobx";

class Counter{
  count = 0
  constructor() {
  //定义this
    makeAutoObservable(this)
  }
  addCount = () => {
    this.count++
  }
}
// 实例化导出 （这里必须实例化导出，否则无法使用）
//这里注意大小写，导出的是小写的
const counter = new Counter()
export { counter }

2.2 在相应的模块引入

import React from 'react'
import { counter } from '@/store/count.js'
引入observer
import { observer } from 'mobx-react-lite';

 function Box() {
  console.log(counter.count);
  return (
    <div>
      //想在里面拿值，直接用（counter.xxx，方法也是如此）就可以
      {counter.count}
      <button onClick={counter.addCount}>
        加
      </button>
    </div>
  )
}

//使用observer监听，若不使用则数据无法在页面上更新
export default observer(Box)

3.1 使用mbox进行computed计算

import { makeAutoObservable } from "mobx";

class Counter{

  list = [1,2,3,4]
  constructor() {
    makeAutoObservable(this)
  }
  // 定义一个计算属性 前面需要加get
  get filterList() {
    return this.list.filter(item =>item>2)
  }

  // push数据
  addList = () => {
    this.list.push(5)
  }

}
// 实例化导出
const counter = new Counter()
export { counter }

3.2引入

import React from 'react'
import { counter } from '@/store/count.js'
import { observer } from 'mobx-react-lite';

 function Box() {
  return (
    <div>
      {counter.filterList}
      <button onClick={counter.addList}>push</button>
    </div>
  )
}

export default observer(Box)

4.统一管理mbox

如果要统一管理的话，和直接使用有一些差别，（不能在里面直接实例化，否则会报错，因为你会在统一管理里面实例化）

1.新建一个store文件夹

2.新建index.js统一管理

3.其他的文件随意命名，不过一般xxx.Store.js的命名方式

话不多说，直接上代码

这里是login.Store.js文件
import { makeAutoObservable } from "mobx";
import { http, storeToken, getToken,removeToken } from "../API";

class Login{
   //当token没有的时候，给他一个空值
  token = getToken() || ''
  constructor() {
    makeAutoObservable(this)
  }
   //发送登录请求
  toLogin = async ({mobile,code}) => {
    const {data:res} = await http.post('/authorizations',{
      mobile,code
    })
    this.token = res.token
    // 存token
    storeToken(this.token)
  }
  //清空token
  loginOut = () => {
    this.token = ''
    removeToken()
  }
}
export default Login

//这里是index.js文件  （统一管理）
import React, { useContext } from "react";
import Login from "./login.Store";

class RootStore {
  constructor() {
    this.login = new Login()
    //如果还有其他文件，依照上面引入即可
  }
}
// 导入useStore方法供组件使用数据
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useStore = () => useContext(context)
export {useStore}

在函数组件引入并使用

import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom'
//解构赋值
const { login } = useStore()
const navigate = useNavigate()
//这里的values就是你form表单里面的值
const onFinish = async (values) => {
    await login.setToken({
      mobile: values.mobile,
      code: values.code
    })
    navigate('/layout/home', { replace: true })
    message.success('登录成功');
};