如何在 Next.js 13 中使用 MobX 进行全局状态管理

在 Next.js 13 中使用 MobX 进行全局状态管理的步骤如下：

1. 安装 MobX 和 MobX React：在项目根目录中运行以下命令安装 MobX 和 MobX React。

npm install mobx mobx-react

2. 创建一个 MobX Store：在根目录下创建一个名为 store.js 的文件，并在其中定义你的 MobX Store。

import { makeAutoObservable } from "mobx";

class AppStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

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

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

const store = new AppStore();

export default store;

3. 在 _app.js 文件中使用 MobX Provider：在项目的 _app.js 文件中使用 MobxProvider，将 MobX Store 传递给整个应用程序。

import { Provider as MobxProvider } from "mobx-react";
import store from "../store";

function MyApp({ Component, pageProps }) {
  return (
    <MobxProvider store={store}>
      <Component {...pageProps} />
    </MobxProvider>
  );
}

export default MyApp;

4. 在组件中使用 MobX Store：在需要使用全局状态的组件中，可以使用 useStore hook 来获取 MobX Store，并在组件中使用它。

import { observer } from "mobx-react";
import { useStore } from "../store";

const Counter = observer(() => {
  const store = useStore();

  const handleIncrement = () => {
    store.increment();
  };

  const handleDecrement = () => {
    store.decrement();
  };

  return (
    <div>
      <button onClick={handleIncrement}>+</button>
      <span>{store.count}</span>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
});

export default Counter;

5. 使用 MobX Store：在你的页面中使用组件。

import Counter from "../components/Counter";

function HomePage() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default HomePage;

现在你可以在整个 Next.js 应用程序中使用 MobX 进行全局状态管理了。当 MobX Store 中的状态发生变化时，相关的组件将自动更新。