React使用Mobx6.x共享状态

文档地址 安装mobx、mobx-react-lite mobx-react-lite是mobx-react的轻量级版本

代码语言：javascript复制

yarn add mobx mobx-react-lite

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

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

代码语言：javascript复制

import { makeAutoObservable } from "mobx"

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

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

代码语言：javascript复制

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

mobx ecmascript react

0 人点赞