Mobx--store状态管理工具

1、简单使用

安装

yarn add mobx-react-lite

counter.Store.js

import { makeAutoObservable } from "mobx"
class CounterStore {
  count = 0
  constructor() {
    //把数据弄成响应式
    makeAutoObservable(this)
  }
  //定义action函数（修改数据)
  addCount = () => {
    this.count++
  }
}
//导出给react使用
const counterStore = new CounterStore()
export { counterStore }

react组件App.js中使用：

import { counterStore } from "./store/counter.Store";
//导入中间件连接mobx 和 react 完成响应式变化
import {observer} from "mobx-react-lite"
function App () {
  return (
    <div className="App">
      {counterStore.count}
      <button onClick={counterStore.addCount}>+</button>
    </div>
  )
}
//包裹App
export default observer(App) 

2、含有计算属性

counter.Store.js

import { computed, makeAutoObservable } from "mobx"
class CounterStore {
  count = 0
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    //把数据弄成响应式     标记filterList是计算属性
    makeAutoObservable(this,{
      filterList:computed
    })
  }
  //计算属性
  get filterList () {
    return this.list.filter(item => item > 2)
  }
  //定义action函数（修改数据)
  addList = () =>{
    this.list.push(7,8,9)
  }
  //定义action函数（修改数据)
  addCount = () => {
    this.count++
  }
}
//导出给react使用
const counterStore = new CounterStore()
export { counterStore }

react组件App.js中使用：
使用时需要observer(App）

import { counterStore } from "./store/counter.Store";
//导入中间件连接mobx 和 react 完成响应式变化
import {observer} from "mobx-react-lite"
function App () {
  return (
    <div className="App">
      {/* 简单使用 */}
      {counterStore.count}
      <button onClick={counterStore.addCount}>+</button>
      <br />
      {/* 使用计算属性 */}
      {counterStore.filterList.join('-')}
    </div>
  )
}
//包裹App
export default observer(App) 

3、模块化

使用useContext机制导出。
模块counter.Store.js：

import { makeAutoObservable } from "mobx"
class CounterStore {
  count = 0
  constructor() {
    //把数据弄成响应式  
    makeAutoObservable(this)
  }
  //定义action函数（修改数据)
  addCount = () => {
    this.count++
  }
}
//导出给react使用
export { CounterStore }

模块list.Store.js

import { makeAutoObservable } from "mobx"
class ListStore {
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this)
  }
  //计算属性
  get filterList () {
    return this.list.filter(item => item > 2)
  }
  //定义action函数（修改数据)
  addList = () => {
    this.list.push(7, 8, 9)
  }
}
export { ListStore }

组合子模块index.js
使用useContext完成统一封装方法

import React from "react"
import { ListStore } from "./list.Store.js"
import { CounterStore } from "./counter.Store.js"
class RootStore {
  constructor() {
    // 对子模块进行实例化操作  
    //将来实例化new RootStore时，根实例有两个属性counterStore、listStore
    this.counterStore = new CounterStore()
    this.listStore = new ListStore()
  }
}
//实例化操作
const rootStore = new RootStore()
//使用useContext完成统一封装方法    使用useContext查找机制：优先从Provider value查，
//如果查不到 就会找createContext(rootStore)传过来的默认参数rootStore
const context = React.createContext(rootStore)
//导出useStore方法   供组件通过useContext拿到根实例
// React.useContext 在 useStore 函数中调用。必须以单词“use”开头React钩子/钩子规则：useStore 不能userStore
const useStore = () => React.useContext(context)
export { useStore }

react组件App.js中使用：
使用时需要observer(App）

import { useStore } from "./store/index"
//导入中间件连接mobx 和 react 完成响应式变化
import {observer} from "mobx-react-lite"
function App () {
  //拿到根实例
  const  rootStore = useStore()
  //使用解构赋值  也可以直接用rootStore.counterStore
  const {counterStore} = useStore()
  // const {listStore} = useStore()  rootStore.listStore
  return (
    <div className="App">
      {/* 简单使用 */}
      {counterStore.count}
      <button onClick={counterStore.addCount}>+</button>
      <br />
      {rootStore.listStore.filterList.join('-')}
      <button onClick={rootStore.listStore.addList}>修改数组</button>
    </div>
  )
}
//包裹App
export default observer(App)