--- theme: fancy highlight: a11y-dark --- > **“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，[点击查看活动详情](https://juejin.cn/post/7194721470063312933 "https://juejin.cn/post/7194721470063312933")”** # 1. 简介 > Mobx 就类似于 Vue的Vuex 是React官方包，mobx 使用面向对象的方法来写 1. **Mobx 逻辑处理** 修改数据 2. **React UI渲染** 事件触发，调用Mobx # 2. 代码处理 1. 安装库 ```shell pnpm i mobx mobx-react-lite ``` 2. 创建soter文件夹和index.ts文件 3. 创建一个模型类 ```tsx import { makeAutoObservable } from "mobx"; // 定义一个类 class StuStore { constructor() { // 对Store对象进行全局响应式处理 makeAutoObservable(this) } // 定义数据 stu = { name: '小明', age: 1 } } // 创建实例化对象 const stuStore = new StuStore(); export default stuStore; ``` 4. 在视图上显示数据 > 需要把刚才实例化出来的store进行导入 ``` import stuStore from '../store/store' export default function MainCom() { return

Main

学生：{stuStore.stu.name}==={stuStore.stu.age}

} ``` 5. 修改数据 1. 需要修改storeClass 创建一个修改数据的方法 ```tsx // 定义一个类 class StuStore { constructor() { // 对Store对象进行全局响应式处理 makeAutoObservable(this) } // 定义数据 stu = { name: '小明', age: 1 } setStu = () => { this.stu = { name: "小红", age: 20 } } } ``` 2. 调用方法前需要先调用observer，observer是对视图进行响应式更新 > 使用observer方法订阅的组件，在监听到mobx数据更新后才会更新视图 ```tsx import stuStore from '../store/store' import { observer } from "mobx-react-lite"; function MainCom() { return

Main

学生：{stuStore.stu.name}==={stuStore.stu.age}

} export default observer(MainCom) ``` 3. 再直接通过常规Click触发定义的修改方法 4. 通过传递数据进行修改 1. 修改store 方法 ```tsx setStu = (name: string) => { this.stu.name = name } ``` 2. 视图更新方法 ```tsx ``` 6. **Computed** 计算属性 > 基于现在的数据缓存做计算，并且依赖变化之后立刻进行计算，和Vue中的computed很相似 1. 创建一个计算属性方法 ```tsx get getStu() { return `姓名：${this.stu.name}，年龄：${this.stu.age}` } ``` 3. 导入新的方法 **computed** ```tsx import { computed, makeAutoObservable } from "mobx"; ``` 4. 把属性注册为计算属性 ``` makeAutoObservable(this, { getStu: computed }) ``` ```tsx class StuStore { constructor() { // 对Store对象进行全局响应式处理 makeAutoObservable(this, { getStu: computed }) } // 定义数据 stu = { name: '小明', age: 1 } get getStu() { return `姓名：${this.stu.name}，年龄：${this.stu.age}` } setStu = (name: string) => { this.stu.name = name } } ``` 7. 模块化，如果有多个store，用现在的方法管理起来是比较麻烦的，我们就进一步学习 1. 每个对应的store 创建一个文件进行管理 2. 修改store/index.ts文件，并导入所有的store实例化对象 ``` class RootStore { constructor() { this.stuStore = stuStore } } const rootStore = new RootStore() export default rootStore; ``` 3. 在视图文件中使用 ``` import rootStore from '../store/store' import { observer } from "mobx-react-lite"; let { stuStore } = rootStore function MainCom() { return

学生：{stuStore.stu.name}==={stuStore.age}

计算属性

{stuStore.getStu}

} export default observer(MainCom) ``` # 3. 总结 1. 在学习了mobx 之后，redux可是一点也不想用了，这可太方便了。 2. 把逻辑处理和视图渲染分的清清楚楚，维护不再困难。