React+mobx公共状态管理基础

安装依赖 mobx、mobx-react

pages // 文件 - 页面调用
store // 文件 - 数据存储

// store -> homeStore.ts 一个小store
import { observable, action, makeObservable, runInAction } from 'mobx'

class homeStore {
	constructor() {
		makeObservable(this)
	}
	@observable num: number = 1 // 定义一个公共状态，observable为可修改装饰器
	@observable id: string = '123'
	@observable arr: any[] = []
	// ...

	@action // 修改公共状态装饰器
	setNum = (_num: number) => {
		this.num = _num
	}

	@action
	setId = (_id?: string) => {
		if (_id) {
			this.id = _id
		} else {
			const { code, data } = Service.getId() // 调用接口返回id(这里可用setTimeout模拟异步)
			if (code === 200) {
				runInAction(() => { // 处理异步信息需要用runInAction包裹
					// 再runInAction方法第一个回调参数中进行数据处理并赋值
					this.id = data?.id
				}
			}
		}
	}
}

export default new homeStore()

// store -> index.ts 所有store出口
import homeStore from './homeStore'
// ...

const store = {
	homeStore
	// ...
}

export default store

// 页面调用
import React from 'react'
import { observer, inject } from 'mobx-react'
import { toJS } from 'mobx'

interface IProps {}
interface IState {}

@inject('homeStore') // 拿到store中homeStore数据 @inject('homeStore', '', '') 可写多个
@observer // mobx-react 给类添加装饰器
class HomeStore extends React.Component<IProps, IState> {
	constructor(props: IProps) {
		super(props)
		this.state = {}
	}

	// 点击修改num
	handleSetNum = (_num: number) => {
		const { setNum } = this.props.homeStore
		setNum(_num) // 拿到store方法进行赋值
	}

	// 点击修改id
	handleSetId = () => {
		const { setId } = this.props.homeStore
		setId('修改后的id456')
	}
	// 点击修改arr
	handleSetArr = () => {
		// ...思路一样
	}

	// render显示store值
	const { num, id, arr } = toJS(this.props.homeStore)
	render() {
		<button onClick={() => this.handleSetNum(num + 1)}>点击修改num</button>
		<button onClick={this.handleSetId}>点击修改id</button>
		<button onClick={this.handleSetArr}>点击修改arr</button>

		<div>num --- {num}</div>
		<div>id --- {id}</div>
		<div>arr --- {arr}</div>
	}
}

export default HomeStore