核心思想
将每个页面上需要存储到全局的数据状态组成一个文件,再由一个统一的文件(一般是index.Store)进行集中管理, 其他文件调用时直接调用indexStore
即可
示例:
store/list.Store.js
import {makeAutoObservable, computed} from "mobx-react-lite"
class ModuleA {
list = [1,2,3,4]
constructor(){
makeAutoObservable(this,{
listFilter: computed
})
}
get listFilter(){
this.list.map(_=>{_>2_})
}
}
store/count.Store.js
import {makeAutoObservable, computed} from 'mobx-react-lite'
const ModuleB {
count = 0
constructor(){
makeAutoOvservable(this,{
countPlus:computed
})
}
countPlus=()=>{
}
}
store/index
import {makeAutoObservable} from 'mobx-react-lite'
import {listStore} from ''./listStore'
import {countStore} from './countStore'
class IndexStore {
constructor(){
this.listStore = new listStore()
this.countStore = new countStore()
makeAutoObservable(this)
}
}
const indexStore = new indexStore()
export default indexStore