MobX使用讲解

MobX 通过响应式编程实现简单高效，可扩展的状态管理库。

常用 API 

• makeAutoObservable ：自动转换

• 直接在构造函数中使用 makeAutoObservable 来实现 observable 和 action 、computed 修饰器功能

// target: 将目标对象中的属性和方法设置为 observable state 和 action 
// overrides: 覆盖默认设置, 将 target 对象中的某些属性或者方法设置为普通属性 
// options: 配置对象, autoBind, 使 action 方法始终拥有正确的 this 指向 

makeAutoObservable(target, overrides?, options?)

 1、在 src 目录新建store文件夹，在新建 index.ts 文件中写入

• 导入子模块入口文件，将子模块实例化交给全局 user 使用
• 设置响应式处理
• 先实例化 store 并导出

import { makeAutoObservable } from "mobx";
import UserStore from "./modules/user";

class Store {
    user//这个实例可以调用user类中的数据和方法
    constructor() {
        makeAutoObservable(this)//让全局中的状态和页面自动响应
        this.user = new UserStore()//把userStore实例化，交给全局的store类中的user
    }
}

const store = new Store()//Store需要实例化才能调用user中复杂数据对象

export default store

2、在 store 内创建 modules 文件管理子模块 user.ts

• 内部定义数据、响应式处理、设置 actions 处理函数、导出子模块

import { makeAutoObservable } from "mobx";

class UserStore {
    //初始化状态
    loginState: Boolean = Boolean(localStorage.getItem("loginState"));
    userid: string = localStorage.getItem("userid") || "";
    token: string = localStorage.getItem("token") || "";

    constructor() {
        makeAutoObservable(this); //将这个类组件设置为自动响应时
    }

    //修改状态
    changeLoginState(action: { payload: any }) {
        this.loginState = action.payload;
    }
    changeUserId(action: { payload: any; }) {
        this.userid = action.payload
        // console.log(2, this.userid )
    }
    changeToken(action: { payload: any; }) {
        this.token = action.payload
        // console.log(3, this.token)
    }

}

export default UserStore;

3、主文件 index.ts 中

• 导入 store 和 provider ，将 provider 的 props 传入store

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './main.scss';
import { BrowserRouter } from "react-router-dom"
import store from './store'
import { Provider } from 'mobx-react';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      {/* 使用provider将app包裹，进行全局管理，那么app就能使用store了 */}
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

4、组件中使用

• 把 store 状态管理注入到 login 组件，并且 observer 实现和 login 页面的响应式
• 在页面中想使用 mobx 必须 通过 inject、observer 绑定

import { inject, observer } from 'mobx-react';
//保存到状态管理器
props.store.user.changeLoginState({ payload: true })

props.store.user.changeUserId({ payload: res.data.data.userid })

props.store.user.changeToken({ payload: res.data.data.token })


// 把store 状态管理 注入到login组件 并且observer实现和loginy页面的响应式 
// 在页面中想使用mobx 必须 通过inject observer绑定 
export default inject('store')(observer(Login));