MobX 是一个简单、可伸缩的响应式状态管理库。通过 MobX 你可以用最直观的方式修改状态,其他的一切 MobX 都会为你处理好(如自动更新UI),并且具有非常高的性能。当状态改变时,所有应用到状态的地方都会自动更新。
React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。
下面重点介绍下react使用mobx封装管理用户登录的store,主要是基于mobx封装管理用户登录的store。
store/login.Store.js
// 登录模块 import { makeAutoObservable } from "mobx" import { http } from '@/utils' class LoginStore { token = '' constructor() { makeAutoObservable(this) } // 登录 login = async ({ mobile, code }) => { const res = await http.post('http://geek.itheima.net/v1_0/authorizations', { mobile, code }) this.token = res.data.token } } export default LoginStore
store/index.js
import React from "react" import LoginStore from './login.Store' class RootStore { // 组合模块 constructor() { this.loginStore = new LoginStore() } } // 导入useStore方法供组件使用数据 const StoresContext = React.createContext(new RootStore()) export const useStore = () => React.useContext(StoresContext)