🎉🎉🎉一文全面了解：一个神奇的 react-antd-admin mobx 设计

比如一个项目有登录模块，登录之后要存储用户信息，token，还有产品模块，订单模块，这种怎么使用 mobx

对于一个项目包含登录、产品、订单等多个模块的情况，你可以使用 MobX 来管理全局状态。以下是一个示例，演示如何使用 MobX 来处理这些不同模块的状态。

步骤 1: 创建 MobX Stores

首先，为每个模块创建一个 MobX store。在你的项目中，可能会有以下三个不同的 store：AuthStore（用于管理用户登录信息）、ProductStore（用于管理产品信息）、OrderStore（用于管理订单信息）。

下面是一个示例 AuthStore，其他 store 的结构类似：

javascript 复制代码

// AuthStore.js
import { makeAutoObservable } from 'mobx';

class AuthStore {
  user = null;
  token = null;

  constructor() {
    makeAutoObservable(this);
  }

  setUser(user) {
    this.user = user;
  }

  setToken(token) {
    this.token = token;
  }

  logout() {
    this.user = null;
    this.token = null;
  }
}

const authStore = new AuthStore();
export default authStore;

步骤 2: 使用 MobX Stores

在你的组件中，你可以使用这些 MobX store 来访问和修改相关的状态。例如，在登录组件中：

javascript 复制代码

import React from 'react';
import { observer } from 'mobx-react-lite';
import authStore from './AuthStore';

const Login = observer(() => {
  const login = () => {
    // 调用登录接口，成功后设置用户信息和 token
    authStore.setUser({ username: 'exampleUser' });
    authStore.setToken('exampleToken');
  };

  const logout = () => {
    authStore.logout();
  };

  return (
    <div>
      {authStore.user ? (
        <div>
          <p>Welcome, {authStore.user.username}!</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <div>
          <button onClick={login}>Login</button>
        </div>
      )}
    </div>
  );
});

export default Login;

在其他组件中，你可以类似地使用 ProductStore 和 OrderStore，分别管理产品和订单的状态。

步骤 3: 注入 Stores

为了在组件中使用这些 stores，你需要将它们注入到你的应用中。通常，你可以使用 Provider 组件来注入 MobX store：

javascript 复制代码

import React from 'react';
import { Provider } from 'mobx-react-lite';
import AuthStore from './AuthStore';
import ProductStore from './ProductStore';
import OrderStore from './OrderStore';
import App from './App';

const stores = {
  authStore: AuthStore,
  productStore: ProductStore,
  orderStore: OrderStore,
};

function Root() {
  return (
    <Provider {...stores}>
      <App />
    </Provider>
  );
}

export default Root;

这样，你的整个应用程序都可以访问到这些 stores。

通过这种方式，你可以将不同模块的状态分别管理在不同的 MobX store 中，然后在需要的组件中使用它们。这有助于保持代码的模块化和可维护性，同时允许不同模块之间共享状态。