mobx环境配置

1.创建react项目，初始化

npx create-react-app react-mobx

2.安装mobx和mobx-react-lite

yarn add mobx mobx-react-lite 

编写一个mobx 的小案例

1.定义数据状态

2.数据响应式处理

3.定义一个函数

4.实例化并将实例导出

import { makeAutoObservable } from 'mobx'

class CountesStore {
  // 1.定义数据
  count = 0
  // 2.数据响应式处理
  constructor() {
    makeAutoObservable(this)
  }

  // 3.定义一个函数
  addcount = () => {
    this.count++
  }

}

// 4.实例化并将实例导出
const countesStore = new CountesStore()

export { countesStore }

1.导入countStore实例

2.使用实例中的数据

3.修改实例中的数据

4.让试图响应数据变化

// 1.countesStore
import { countesStore } from './store/countes'
// 2.导入中间连接件，使数据完成响应式
import { observer } from 'mobx-react-lite'
function App () {
  return (
    <div className="App">
      {/* 渲染数据 */}
      {countesStore.count}
      {/* 对数据进行修改 */}
      <button onClick={countesStore.addcount}>++</button>
    </div>
  )
}

// 包裹App组件
export default observer(App)