react18---mobx的使用

介绍：mobx和vuex一样都是状态管理。使用mobx的时候需要注意的是要引入

1、import { makeAutoObservable } from "mobx"
用于将模块中的数据更改为响应式
 constructor() {
    // 将数据改为响应式
    makeAutoObservable(this)
  }

2、import { observer } from "mobx-react-lite"
将组件的数据改为响应式，如果不使用，交互时mobx中的数据会变，视图不会改变
可以理解为：实时改变该组件的状态
使用：导入后包裹该组件
function Test() {}
export default observer(Test)

3、计算属性
使用get +函数
// 计算属性使用get标识符
  get doubleCount() {
    return this.count % 2
  }

安装mobx

使用 yarn add mobx mobx-react-lite

使用

1、将store进行模块化,分别建立listStore和countStore

countStore.js

// 导入mbox函数、
import { makeAutoObservable } from "mobx"

class CountStore {
  // 定义数据
  count = 10
  constructor() {
    // 将数据改为响应式
    makeAutoObservable(this)
  }
  // 计算属性使用get标识符
  get doubleCount() {
    return this.count % 2
  }
  // 注册action函数
  addCount = () => {
    this.count++
  }
}
// 暴露
export { CountStore }

listStore.js

// 导入mbox函数、
import { makeAutoObservable } from "mobx"
class ListStore {
  // 定义数据
  count = 10
  constructor() {
    // 将数据改为响应式
    makeAutoObservable(this)
  }
  // 计算属性使用get标识符
  get doubleCount() {
    return this.count % 2
  }
  // 注册action函数
  addCount = () => {
    this.count++
  }
}
// 暴露
export { ListStore }

2、在index.js中封装一下，导出useStore

// 整合countStore和listStore
import React from "react"
// 导入
import { CountStore } from "./countStore"
import { ListStore } from "./listStore"

class RootStore {
  constructor() {
    //初始化子模块
    this.countStore = new CountStore()
    this.listStore = new ListStore()
  }
}
// 实例化RootStore
const rootStore = new RootStore()
// 和Provider value={传递的数据}，
// useContext先从Provider value中查找数据，如果查不到，就会找createContext中传递的参数
const context = React.createContext(rootStore)
// 通过useContext拿到rootStore中的对象然后返回
const useStore = () => React.useContext(context)

export { useStore }

3、在代码中使用，这里只是打印了一下useStore中的两个子模块

import { observer } from "mobx-react-lite"
import { useStore } from "../store"
function Test() {
  console.log(useStore())
  const { countStore, listStore } = useStore()
  console.log(countStore)
  console.log(listStore)
  return <div></div>
}
export default observer(Test)