基于Module Federation实现多Vue应用Pinia Store数据共享方案咨询

核心结论 #

Module Federation本质是代码共享工具，但可以通过调整暴露内容实现跨应用的状态实例共享，而不只是共享Store的定义代码。你当前的问题是因为每个消费应用都重新初始化了Store实例，导致状态隔离。

解决步骤 #

1. 修改宿主应用：暴露已初始化的Store实例

不要只暴露Store的定义，而是在宿主中完成实例初始化并导出：

// src/store/counterStore.ts
import { defineStore } from 'pinia';

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

// 初始化实例并导出，替代原有的仅导出定义
export const counterStore = useCounterStore();
// 导出类型方便消费端做类型提示
export type CounterStore = ReturnType<typeof useCounterStore>;

宿主应用的Module Federation配置无需修改，仍保持暴露./CounterStore。

2. 消费应用：直接使用共享的实例

在消费应用的组件中，直接导入宿主提供的已初始化实例，无需自己再调用useCounterStore()：

// 消费应用的组件代码
import { counterStore } from 'app1/CounterStore';

export default {
  setup() {
    const increment = () => counterStore.increment();
    return {
      // 直接绑定共享实例的状态，所有应用修改都会同步
      count: counterStore.count,
      increment,
    };
  },
};

3. 关键配置：确保依赖单例

为了避免Vue和Pinia出现多实例冲突，需要在宿主和消费应用的Module Federation配置中添加shared选项，强制依赖单例：

// 宿主/消费应用的vite配置
ModuleFederationPlugin({
  // ...原有配置
  shared: {
    vue: { singleton: true },
    pinia: { singleton: true },
  },
});

注意事项 #

• 这种内存级的实例共享仅适用于同页面微前端（多个应用嵌入在同一个浏览器标签页），跨标签页的状态同步需要额外方案（如localStorage、Broadcast Channel）。
• 所有应用必须使用相同版本的Vue和Pinia，避免兼容性问题。

内容的提问来源于stack exchange，提问作者Aleksa Aleksic