为React函数组件创建新的MobX存储实例

import React from 'react';
import { makeObservable, observable, action } from 'mobx';
import { observer } from 'mobx-react';

class MyStore {
  // 定义需要观察的状态
  @observable count = 0;

  // 定义操作
  @action increment() {
    this.count++;
  }

  @action decrement() {
    this.count--;
  }
}

// 使用makeObservable函数将状态和操作绑定到存储实例上
makeObservable(MyStore);

const MyComponent = observer(() => {
  const store = new MyStore();

  return (
    <div>
      <h1>Count: {store.count}</h1>
      <button onClick={() => store.increment()}>Increment</button>
      <button onClick={() => store.decrement()}>Decrement</button>
    </div>
  );
});