“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情”

1. 简介

Mobx 就类似于 Vue的Vuex 是React官方包，mobx 使用面向对象的方法来写

Mobx 逻辑处理 修改数据
React UI渲染 事件触发，调用Mobx

2. 代码处理

安装库

pnpm i mobx mobx-react-lite

创建soter文件夹和index.ts文件
创建一个模型类

import { makeAutoObservable } from "mobx";

// 定义一个类
class StuStore {

    constructor() {
        // 对Store对象进行全局响应式处理
        makeAutoObservable(this)
    }

    // 定义数据
    stu = {
        name: '小明',
        age: 1
    }
}

// 创建实例化对象
const stuStore = new StuStore();

export default stuStore;

在视图上显示数据

需要把刚才实例化出来的store进行导入

import stuStore from '../store/store'

export default function MainCom() {

    return <div>
        Main
        <p>学生：{stuStore.stu.name}==={stuStore.stu.age}</p>
    </div>
}

修改数据

需要修改storeClass 创建一个修改数据的方法

// 定义一个类
class StuStore {

    constructor() {
        // 对Store对象进行全局响应式处理
        makeAutoObservable(this)
    }

    // 定义数据
    stu = {
        name: '小明',
        age: 1
    }
    setStu = () => {
        this.stu = {
            name: "小红",
            age: 20
        }
    }
}

调用方法前需要先调用observer，observer是对视图进行响应式更新

使用observer方法订阅的组件，在监听到mobx数据更新后才会更新视图

import stuStore from '../store/store'
import { observer } from "mobx-react-lite";

function MainCom() {

    return <div>
        Main
        <p>学生：{stuStore.stu.name}==={stuStore.stu.age}</p>
        <button onClick={stuStore.setStu}>调用修改方法</button>
    </div>
}

export default observer(MainCom)

再直接通过常规Click触发定义的修改方法

通过传递数据进行修改

修改store 方法

setStu = (name: string) => {
    this.stu.name = name
}

视图更新方法

<button onClick={() => stuStore.setStu("小张")}>调用修改方法</button>

Computed 计算属性

基于现在的数据缓存做计算，并且依赖变化之后立刻进行计算，和Vue中的computed很相似

创建一个计算属性方法

get getStu() {
    return `姓名：${this.stu.name}，年龄：${this.stu.age}`
}

导入新的方法 computed

import { computed, makeAutoObservable } from "mobx";

把属性注册为计算属性

makeAutoObservable(this, {
    getStu: computed
})

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
    }
}

模块化，如果有多个store，用现在的方法管理起来是比较麻烦的，我们就进一步学习

每个对应的store 创建一个文件进行管理
修改store/index.ts文件，并导入所有的store实例化对象

class RootStore {
    constructor() {
        this.stuStore = stuStore
    }
}

const rootStore = new RootStore()


export default rootStore;

在视图文件中使用

import rootStore from '../store/store'
import { observer } from "mobx-react-lite";

let { stuStore } = rootStore

function MainCom() {

    return <div>
        <p>学生：{stuStore.stu.name}==={stuStore.age}</p>
        <button onClick={() => stuStore.setStu("小张")}>调用修改方法</button>
        <hr/>
        <div>
            <p>计算属性</p>
            <p>{stuStore.getStu}</p>
        </div>
    </div>
}

export default observer(MainCom)

3. 总结

在学习了mobx 之后，redux可是一点也不想用了，这可太方便了。
把逻辑处理和视图渲染分的清清楚楚，维护不再困难。

学习React 的第十一天 mobx也太好用了

1. 简介

2. 代码处理

3. 总结