mobx的基本使用

1.子组件     (功能需求 ： 在组件中显示数值状态，单击按钮使数值加一，点击按钮使数值重置)

//组件名为Counter 
// observer: 监控当前组件使用到由Mobx跟踪的observable state, 当状态发生变化时通知React更新视图

//引入依赖
import { observer } from "mobx-react-lite"

function Counter({ counterStore }) {
    return (
        <div>
            <p> 当前数值：{ counterStore.count } </p>
            <button onClick={() => counterStore.increment()} > 加1 </button>
            <button onClick={() => counterStore.reset()} > 重置 </button>
        </div>
    )

}

//observer(Counter) 包裹组件  监听组件里面的Mobx跟踪的状态发生变化就更新组件
export default observer(Counter)

2.Modx状态存放的文件

//管理Counter状态的文件

import { makeAutoObservable } from "mobx"

class CounterStore {
    //数值状态
    count = 10
    //构造器
    constructor() {
        // 将当前对象里的属性设置为 observable state
        // 将当前对象中的方法设置为action
        // 总结：通过makeAutoObservale自动地给类中的每个属性和方法标记上observale和action
        makeAutoObservable(this)
    }
    
    // 数值状态加1
    increment() {
        this.count += 1
    }
    // 重置数值状态
    reset() {
        this.count = 0
    }
}

export default CounterStore

3.父组件  (Counter的父组件也叫容器组件）

// 导入Counter组件
import Counter form "./components/Counter/Counter"
// 导入管理Counter组件的Store
import CounterStore from "./stores/Counter/CounterStore"
// 创建管理Counter组件的Store实例对象
const counterStore = new CounterStore()


function App() {
    // 调用 Counter组件 并传入状态管理的 Store
    return <Counter counterStore={ counterStore } />
}

export default App