react hook使用mobx，并使用Provide实现全局注入store

在 React 应用中，你可以使用 MobX 的 Provider 组件来全局注入你的 store，这样你的整个应用都可以访问到这些 store。以下是如何使用 MobX 和 React Hooks 配置全局注入的示例：

首先，确保你已经安装了 MobX 和它的 React 绑定库：

npm install mobx mobx-react-lite

然后，创建一个简单的 MobX store：

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

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count += 1;
  }

  decrement() {
    this.count -= 1;
  }
}

const counterStore = new CounterStore();
export default counterStore;

接下来，创建一个 RootStore 类，将所有的 store 汇总在一起：

// rootStore.js
import { makeAutoObservable } from "mobx";
import counterStore from "./store";

class RootStore {
  constructor() {
    makeAutoObservable(this);
  }

  getCounterStore = () => {
    return counterStore;
  };
}

const rootStore = new RootStore();
export default rootStore;

然后，在应用的入口文件中使用 Provider 组件来注入 RootStore：

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "mobx-react-lite";
import App from "./App";
import rootStore from "./rootStore";

ReactDOM.render(
  <Provider rootStore={rootStore}>
    <App />
  </Provider>,
  document.getElementById("root")
);

现在，你可以在任何组件中使用 useContext 和 observer 来访问 RootStore 中的 store：

// CounterDisplay.js
import React, { useContext } from "react";
import { observer } from "mobx-react-lite";
import { useStore } from "./storeContext";

const CounterDisplay = observer(() => {
  const { rootStore } = useStore();
  const { count } = rootStore.getCounterStore();

  return <div>Count: {count}</div>;
});

export default CounterDisplay;

// CounterButtons.js
import React, { useContext } from "react";
import { observer } from "mobx-react-lite";
import { useStore } from "./storeContext";

const CounterButtons = observer(() => {
  const { rootStore } = useStore();
  const { increment, decrement } = rootStore.getCounterStore();

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
});

export default CounterButtons;

// storeContext.js
import React, { createContext } from "react";
import rootStore from "./rootStore";

const StoreContext = createContext(rootStore);

export const useStore = () => useContext(StoreContext);

这样，你就可以在整个应用中共享 RootStore 中的状态了。通过这种方式，你可以轻松地在组件之间共享和管理状态。