mobx

一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理

1. 初始化mobx
   • 初始化步骤
   • 定义数据状态state
   • 在构造器中实现数据响应式处理 makeAutoObservble
   • 定义修改数据的函数action
   • 实例化store并导出

import { makeAutoObservable } from 'mobx'

class CounterStore {
  count = 0 // 定义数据
  constructor() {
    makeAutoObservable(this)  // 响应式处理
  }
  // 定义修改数据的方法
  addCount = () => {
    this.count++
  }
}

const counter = new CounterStore()
export default counter

2. React使用store
   • 在组件中导入counterStore实例对象,从mobx-react-lite导入observer
   • 在组件中使用storeStore实例对象中的数据
   • 通过事件调用修改数据的方法修改store中的数据
   • 让组件响应数据变化observer(Home)

// 导入counterStore
import counterStore from '../store/counterStore'
// 导入observer方法
import { observer } from 'mobx-react-lite'

const Home = (props) => {
  // 执行函数
  return (
    <div>
      Home
      <button onClick={() => counterStore.addCount()}>
        {counterStore.count}
      </button>
    </div>
  )
}
export default observer(Home)

mobx计算属性 computed

import { makeAutoObservable,computed } from 'mobx'

class CounterStore {
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this, {
        filterList: computed
      })  // 响应式处理
  }
  get filterList () {
    return this.list.filter(item => item > 4)
  }
}
const counter = new CounterStore()
export default counter

{JSON.stringify(counterStore.filterList)}

mobx模块化开发

• store

  • index.js
  • CounterStore.js
  • taskStore.js

• index.js

import React from 'react'

import counter from './counterStore'
import task from './taskStore'


class RootStore {
  constructor() {
    this.counterStore = counter
    this.taskStore = task
  }
}

const rootStore = new RootStore()
// context机制的数据查找链  Provider如果找不到 就找createContext方法执行时传入的参数
const context = React.createContext(rootStore)
const useStore = () => React.useContext(context)
export { useStore }

• 实际应用

import { observer } from 'mobx-react-lite'
// 导入方法
import { useStore } from '../store'
function App() {
  // 得到store
  const store = useStore()
  console.log(store)
  return (
    <div className="App">
      <button onClick={() => store.counterStore.addCount()}>
        {store.counterStore.count}
      </button>
    </div>
  )
}
// 包裹组件让视图响应数据变化
export default observer(App)