Qiankun 子应用数据互通 + 资源共享 完整方案（React+Vue）

Qiankun 子应用数据互通 + 资源共享 完整方案（React+Vue）

微前端最核心的痛点就是子应用之间数据互通、公共资源共享 ，我直接给你最实用、能直接落地 的 4 套方案，覆盖 99% 业务场景，包含：

全局状态共享、跨应用通信、公共资源（组件/工具/样式）复用、请求共享。

---

一、全局状态共享（最常用：登录态、用户信息、主题）

Qiankun 内置全局状态管理 ，主应用 ↔ 子应用、子应用 ↔ 子应用都能实时同步数据，不用任何第三方库。

1）主应用：创建全局状态（唯一数据源）

// 主应用入口
import { registerMicroApps, start, initGlobalState } from 'qiankun';

// 1. 初始化全局 state
const initialState = {
  userInfo: null,       // 用户信息
  token: '',            // 登录token
  theme: 'light',       // 主题
  lang: 'zh-CN'         // 语言
};

// 2. 创建全局状态操作方法
const { setGlobalState, onGlobalStateChange } = initGlobalState(initialState);

// 3. 注册子应用时把全局方法传给所有子应用
registerMicroApps([
  {
    name: 'react-subapp',
    entry: '//localhost:3001',
    container: '#subapp-container',
    activeRule: '/react',
    props: {
      setGlobalState,        // 子应用修改全局状态
      onGlobalStateChange,   // 子应用监听变化
    },
  },
  {
    name: 'vue-subapp',
    entry: '//localhost:8080',
    container: '#subapp-container',
    activeRule: '/vue',
    props: {
      setGlobalState,
      onGlobalStateChange,
    },
  }
]);

start();

2）子应用（React / Vue）：使用全局状态

✅ React 子应用使用

export async function mount(props) {
  const { setGlobalState, onGlobalStateChange } = props;

  // 1. 监听全局状态变化（所有应用都会收到）
  onGlobalStateChange((state) => {
    console.log('全局状态更新：', state);
    // 存到 redux/context/本地状态
  }, true); // true = 立即触发一次

  // 2. 修改全局状态
  setGlobalState({
    userInfo: { name: '微前端用户' },
    token: '123456'
  });
}

✅ Vue 子应用使用

export async function mount(props) {
  const { setGlobalState, onGlobalStateChange } = props;

  // 监听
  onGlobalStateChange((state) => {
    console.log(state);
    // 存到 pinia/vuex
  }, true);

  // 修改
  setGlobalState({ theme: 'dark' });
}

---

二、子应用 ↔ 子应用直接通信（事件总线）

适合：弹窗通知、刷新列表、跨应用触发动作

主应用创建一个全局事件总线

// 主应用：创建 EventBus
window.eventBus = {
  events: {},
  on(name, fn) {
    this.events[name] = this.events[name] || [];
    this.events[name].push(fn);
  },
  emit(name, data) {
    (this.events[name] || []).forEach(fn => fn(data));
  }
};

任意子应用发送事件

// React / Vue 都能用
window.eventBus.emit('update-user', { id: 100 });

任意子应用监听事件

window.eventBus.on('update-user', (data) => {
  console.log('收到跨应用消息：', data);
});

---

三、公共资源共享（组件 / 工具库 / 样式 / 接口）

1）公共 JS 工具方法共享（最常用）

主应用把工具库挂载到 window，所有子应用直接用：

// 主应用
window.CommonUtils = {
  formatTime: (t) => t,
  request: axios,          // 共享请求实例
  getToken: () => localStorage.getItem('token')
};

子应用直接使用：

const token = window.CommonUtils.getToken();

2）公共样式共享（主题、全局样式）

1. 主应用把 common.css 暴露静态服务
2. 子应用通过 link 引入

<link rel="stylesheet" href="http://localhost:3000/common.css">

3）公共组件共享（React/Vue 跨技术栈也能复用）

方案 A：Web Component（无技术栈限制）

主应用封装 Web Component，React/Vue 都能直接用。

方案 B：子应用导出组件，主应用加载（进阶）

适合同技术栈。

---

四、请求共享（统一 token、统一拦截、统一域名）

主应用共享 Axios 实例（最强方案）

// 主应用
import axios from 'axios';
const request = axios.create({ baseURL: '/api' });

// 请求拦截统一加 token
request.interceptors.request.use(config => {
  config.headers.token = localStorage.getItem('token');
  return config;
});

// 挂载到全局
window.$request = request;

子应用直接用

window.$request.get('/user/info').then(res => {});

---

五、 localStorage / sessionStorage 共享（默认互通）

同域名/同端口下，主应用 & 子应用默认共享 localStorage

// 主应用存
localStorage.setItem('token', '123');

// 子应用取
localStorage.getItem('token');

---

六、4 种方案对比（直接看这个选型）

方案	适用场景	技术栈	难度
Qiankun 全局状态	用户信息、登录态、主题、语言	全部	⭐
EventBus 事件	跨应用触发动作、通知、刷新	全部	⭐⭐
Window 挂载	工具库、请求、公共方法	全部	⭐
Web Component	跨技术栈公共组件	React+Vue	⭐⭐⭐

---

七、我给你一个企业级最佳实践（直接照抄）

1. 主应用维护全局状态（userInfo、token、theme）
2. 主应用共享请求实例（统一拦截、统一域名）
3. 子应用只读取、不随意写（保证数据唯一来源）
4. 跨应用动作用 EventBus
5. 公共组件用 Web Component

---

总结

• 数据互通 ：用 Qiankun 全局状态（最简单、官方推荐）
• 跨应用触发动作 ：用 EventBus
• 资源共享 ：主应用挂载到 window（工具/请求/样式）
• 本地存储：默认互通，直接用 localStorage