基于mobx模块化封装

核心思想

将每个页面上需要存储到全局的数据状态组成一个文件,再由一个统一的文件(一般是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