2.Mobx实现步骤

最新推荐文章于 2024-12-08 12:14:44 发布

一本正经胡说八道熊

最新推荐文章于 2024-12-08 12:14:44 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： Mobx 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/csdnlmx/article/details/124996233

Mobx 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在React应用中使用Mobx进行状态管理。首先，详细阐述了初始化Mobx的步骤，包括定义数据状态、响应式处理、创建action函数以及实例化store。接着，讲解了如何将React组件与Mobx store连接，涉及导入store、使用及修改store数据以及使组件响应数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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