2.Mobx实现步骤

Mobx实现步骤

1.初始化mobx

1.定义数据状态（state）
2.数据响应式处理
3.定义action函数（修改数据）
4.实例化并导出实例

//代码案例
import { makeAutoObservable } from "mobx";

class CounterStore {
    //1.定义数据
    count = 0;
    constructor() {
        //2.把数据弄成响应式
        makeAutoObservable(this)
    }
    //3.定义action函数，这是用来修改数据的
    addCount = ()=>{
        this.count++;
    }
}

//4.实例化 CounterStore
const counterStore = new CounterStore();
export { counterStore }

2.连接react

1.导入store实例
2.使用store中的数据
3.修改store中的数据
4.让组件视图响应数据变化

//代码实例
//1.导入counterStore
import { counterStore } from './store/count'
//2.导入中间件 连接mobx和react完成响应式变化
import {observer} from 'mobx-react-lite'

function App() {
  return (
    <div >
      {/* 把store的count渲染出来 */}
      {counterStore.count}
      {/* 点击事件触发action函数修改count的值 */}
      <button onClick={counterStore.addCount}>+</button>
    </div>
  );
}

//3.包裹App
export default observer(App);