react mobx

npm i mobx mobx-react-lite

import { makeAutoObservable } from "mobx";

class AppStore {
  constructor() {
    makeAutoObservable(this);
  }
  count = 0;
  changeCount = (num) => {
    this.count += num;
  };
}

const store = new AppStore();
export default store;

// 使用store数据
import store from './store';
import { observer } from 'mobx-react-lite';

function App(){
	return (
		<button onClick={() => store.changeCount(1)}>
			{ store.count }
		</button>
	);
}
export default observer(App);

computed

模块化

// A.js
import { makeAutoObservable } from "mobx";

class A {
  constructor() {
    makeAutoObservable(this);
  }
}
export default new A();

再写一个模块 B.js

// index.js 整合 A.js 和 B.js
import A from "A.js";
import B from "B.js";
import React from 'react'
class IndexStore {
  constructor() {
  	this.A = A;
  	this.B = B;
  }
}

const store = new IndexStore();
const context = React.createContext(store);
const useStore = () => React.useContext(context)
export default useStore;

用的时候

import useStore from 'index.js'
import { observer } from 'mobx-react-lite';

function App(){
	const {A, B} = useStore()
	return {A.count}
}
export default observer(App);