React中使用mobx管理状态数据使用样例

灰太狼 2023-10-14 16:42 45阅读 0赞

MobX 是一个身经百战的库，它通过运用透明的函数式响应编程（Transparent Functional Reactive Programming，TFRP）使状态管理变得简单和可扩展。官网地址：[关于 MobX | MobX中文文档 | MobX中文网][MobX _ MobX_ _ MobX]![ee2fbb20ac9049a78b16c3fda932901d.png][]

## 安装依赖 ##

mobx-react-lite是一个mobx和react建立链接的依赖库，也必须安装才可以使用

yarn add mobx 
    
    
    yarn add mobx-react-lite

## 创建一个或者多个store ##

并使用store/index.js统一管理，这样以后只需要使用统一的一种方式就可以了

CountStore.js：一个存储数据的store

import { makeAutoObservable } from "mobx"
    
    
    class CountStore {
      count = 0
      constructor() {
        makeAutoObservable(this)
      }
    
      addCount = () => {
        this.count++
      }
    }
    
    
    export default CountStore

统一管理的index.js：

import CountStore from "./count";
    import MyInfo from "./info";
    import React from "react";
    
    class Store {
      constructor() {
        this.countStore = new CountStore()
        this.myInfo = new MyInfo()
      }
    }
    
    // 使用context是为了让react识别到Store里面的mobx，不然react不认识Store
    const rootStore = new Store()
    const context = React.createContext(rootStore)
    export const useStore = () => React.useContext(context)

## 在组建中使用 ##

像使用hooks一样使用store，也可以使用解构赋值的形式，将countStore解构出来:

import React from 'react'
    import { useStore } from './store'
    import { observer } from 'mobx-react-lite'
    
    function App() {
        const { countStore, myInfo } = useStore()
    
        return (
            <div>
                <h2>APP组件</h2>
                <div className="count-box">
                    count状态: {countStore.count}
                    <button onClick={countStore.addCount}>+</button>
                </div>
                <div>
                    myinfo状态: {myInfo.myCar.join('++')}
                    myAge状态: {myInfo.FilterAge.join('||')}
                    <button onClick={myInfo.addCar}>修改内容</button>
                </div>
            </div>
        )
    }
    
    export default observer(App)

![31946a5cb4f24061a3aee753caf3e1d1.png][]

## 使用效果 ##

![bed395f8f1b44be9b3cbe9b54c674d46.png][]

可以在React组建中调试查看数据，找到对应的组件，然后查看Hooks下Context属性，找到里面有store的那个，然后打开，即可查看里面存储的数据

![e99b067cf8b24fbda3b3cb11c027f3df.png][]

[MobX _ MobX_ _ MobX]: https://www.mobxjs.com/
[ee2fbb20ac9049a78b16c3fda932901d.png]: https://img-blog.csdnimg.cn/ee2fbb20ac9049a78b16c3fda932901d.png
[31946a5cb4f24061a3aee753caf3e1d1.png]: https://img-blog.csdnimg.cn/31946a5cb4f24061a3aee753caf3e1d1.png
[bed395f8f1b44be9b3cbe9b54c674d46.png]: https://img-blog.csdnimg.cn/bed395f8f1b44be9b3cbe9b54c674d46.png
[e99b067cf8b24fbda3b3cb11c027f3df.png]: https://img-blog.csdnimg.cn/e99b067cf8b24fbda3b3cb11c027f3df.png