Single SPA微前端中基于Mobx根配置Store实现跨微应用数据与状态共享的方案咨询

我完全理解你现在的困惑——刚上手Single SPA微前端，搞定了应用创建和集成，却卡在跨微应用的状态、数据和公共UI组件共享上，搜了一圈没找到清晰的落地方案，确实挺让人头疼的。我之前也遇到过类似的问题，下面给你分享一套基于Mobx的可行方案，还有公共组件共享的思路，希望能帮到你：

一、基于Mobx的全局根Store实现跨应用状态/数据共享 #

核心思路是在Single SPA的根配置项目中创建一个单例的Mobx Store，然后通过Single SPA的customProps机制，把这个Store注入到所有微应用中，这样所有微应用共享同一个状态实例，数据变化会自动同步。

1. 在根配置项目中创建全局Mobx Store #

创建src/rootStore.js文件，定义全局共享的状态和操作方法：

import { makeAutoObservable } from "mobx";

class RootStore {
  // 全局共享状态：用户信息
  currentUser = null;
  // 全局共享状态：系统主题
  appTheme = "light";

  constructor() {
    // 让Mobx自动追踪状态变化
    makeAutoObservable(this);
  }

  // 更新用户信息的Action
  updateCurrentUser = (userData) => {
    this.currentUser = userData;
  };

  // 清除用户信息的Action
  clearCurrentUser = () => {
    this.currentUser = null;
  };

  // 切换主题的Action
  toggleAppTheme = () => {
    this.appTheme = this.appTheme === "light" ? "dark" : "light";
  };
}

// 实例化单例Store并导出
const globalRootStore = new RootStore();
export default globalRootStore;

2. 在根配置中注入Store到所有微应用 #

修改根配置的应用注册代码，通过customProps把全局Store传递给每个微应用：

import { registerApplication, start } from "single-spa";
import globalRootStore from "./rootStore";

// 注册微应用1
registerApplication({
  name: "@my-org/user-app",
  app: () => System.import("@my-org/user-app"),
  activeWhen: ["/user"],
  customProps: () => ({
    rootStore: globalRootStore
  })
});

// 注册微应用2
registerApplication({
  name: "@my-org/dashboard-app",
  app: () => System.import("@my-org/dashboard-app"),
  activeWhen: ["/dashboard"],
  customProps: () => ({
    rootStore: globalRootStore
  })
});

start({
  urlRerouteOnly: true,
});

3. 在微应用中使用全局Store #

以React微应用为例，通过Mobx的observer包裹组件，实现响应式更新：

import React from "react";
import { observer } from "mobx-react-lite";

// 接收根配置传递的props
function UserProfile(props) {
  const { rootStore } = props;

  return (
    <div style={{ padding: "20px", backgroundColor: rootStore.appTheme === "dark" ? "#333" : "#fff", color: rootStore.appTheme === "dark" ? "#fff" : "#333" }}>
      <h3>用户信息</h3>
      {rootStore.currentUser ? (
        <div>
          <p>用户名：{rootStore.currentUser.username}</p>
          <p>邮箱：{rootStore.currentUser.email}</p>
          <button onClick={rootStore.clearCurrentUser}>退出登录</button>
        </div>
      ) : (
        <button onClick={() => rootStore.updateCurrentUser({ username: "Rimsha", email: "rimsha@example.com" })}>模拟登录</button>
      )}
      <br />
      <button onClick={rootStore.toggleAppTheme}>切换主题</button>
    </div>
  );
}

// 用observer包裹，让组件响应Store状态变化
export default observer(UserProfile);

这样，当任意一个微应用调用Store的方法修改状态时，所有使用该状态的微应用组件都会自动更新。

二、公共UI组件的共享方案 #

除了状态共享，公共UI组件的复用也有两种常用思路：

方案1：打包成独立npm包（推荐） #

把公共UI组件（比如Button、Card、Input等）单独维护成一个npm包（比如@my-org/common-ui），每个微应用通过npm安装这个包，直接引入使用：

import { CommonButton, CommonCard } from "@my-org/common-ui";

function DashboardPage() {
  return (
    <CommonCard>
      <h2>仪表盘</h2>
      <CommonButton onClick={() => console.log("点击公共按钮")}>操作按钮</CommonButton>
    </CommonCard>
  );
}

这种方式的优势是版本可控，更新组件时只需升级包版本，各个微应用可以独立选择升级时机。

方案2：通过根配置的customProps传递 #

如果不想单独发包，可以在根配置项目中维护公共组件，然后通过customProps传递给微应用：

// 根配置中创建commonComponents.js
export const CommonButton = ({ children, onClick, type = "primary" }) => {
  const bgColor = type === "primary" ? "#007bff" : "#6c757d";
  return (
    <button style={{ padding: "8px 16px", border: "none", borderRadius: "4px", backgroundColor: bgColor, color: "#fff", cursor: "pointer" }} onClick={onClick}>
      {children}
    </button>
  );
};

// 注册应用时传递组件
import * as commonComponents from "./commonComponents";

registerApplication({
  name: "@my-org/user-app",
  app: () => System.import("@my-org/user-app"),
  activeWhen: ["/user"],
  customProps: () => ({
    rootStore: globalRootStore,
    commonComponents: commonComponents
  })
});

然后在微应用中使用：

function LoginPage(props) {
  const { commonComponents } = props;
  const { CommonButton } = commonComponents;

  return (
    <div>
      <h2>登录</h2>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <CommonButton onClick={() => console.log("登录")}>登录</CommonButton>
    </div>
  );
}

三、其他替代方案（如果不想用Mobx） #

如果你暂时不想用Mobx，也可以考虑这些方案：

• Redux全局Store：和Mobx思路类似，在根配置创建单例Redux Store，通过customProps传递给微应用，微应用使用useSelector和useDispatch操作状态。
• Event Bus事件总线：用RxJS或者自定义事件总线，微应用之间通过发布/订阅事件传递数据，但这种方式适合简单场景，复杂状态管理不如Mobx/Redux直观。

注意事项 #

• 确保所有微应用使用的Mobx版本和根配置的版本一致，避免版本冲突导致的兼容性问题。
• 全局Store只存放跨应用共享的状态，单个应用的私有状态应该放在应用内部的Store中，避免过度耦合。
• 公共UI组件要设计成无状态或者仅依赖传入的props，不要直接依赖全局状态，保证组件的复用性和独立性。

希望这些方案能帮你解决当前的问题，如果还有具体的细节问题，随时可以再问~

备注：内容来源于stack exchange，提问作者Rimsha Malik