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)