React使用Mobx6.x共享状态

安装​​mobx​​​、​​mobx-react-lite​​

​​mobx-react-lite​​是​​mobx-react​​的轻量级版本

yarn add mobx mobx-react-lite

在​​src​​​目录下新建​​store​​​文件夹，新增​​count.js​​文件

​​count​​​为共享的数据
​​​addCount​​为共享的方法

import { makeAutoObservable } from "mobx"

export default makeAutoObservable({
    count: 0,
    addCount() {
        this.count++
    }
})

​​jsx文件引入​​​ 被​​observer ​​包裹的组件可以监听store的值并改变

import { useEffect } from 'react'
import countStore from '@/store/count'
import { observer } from "mobx-react-lite"

export default observer(() => {
    //监听mobx触发事件
    useEffect(() => {
        console.log(countStore.count)
    }, [countStore.count])

    return (
        <div>
            <div>count为：{countStore.count}</div>
            <button onClick={() => countStore.addCount()}>+1</button>
        </div>
    )
})