系列4：【深入】qiankun子应用间通信的多种实现方式—购物网站为例

rabbit_it

已于 2024-09-15 17:06:10 修改

阅读量1.2k

点赞数 12

分类专栏： qiankun学习文章标签：前端前端框架阿里云

于 2024-09-15 16:28:02 首次发布

本文链接：https://blog.csdn.net/qq_14811655/article/details/142285701

版权

qiankun学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、引言：子应用间通信的必要性

在微前端架构中，多个子应用共存于同一个页面，但它们并非完全独立。不同子应用可能需要共享状态、同步数据或触发某些全局事件。例如，一个电商网站的购物车功能和商品展示页面分别属于不同的子应用，但它们之间需要实时同步商品信息、购物车数量等。

在这里插入图片描述

因此，如何设计高效的子应用间通信机制，是微前端开发中的重要议题。

二、子应用间通信的常见方式

在 Qiankun 微前端架构中，子应用之间的通信有多种实现方式。我们将从简单到复杂逐步介绍，并结合实战场景展示具体的实现方法。

2.1 通过 URL 传参通信

这是最基础、最常用的子应用通信方式。通过改变 URL 中的参数，主应用或子应用可以获取到其他应用传递的数据。

2.1.1 示例：通过路由参数传递数据

例如，子应用 A 希望将用户的 userId 传递给子应用 B，可以通过 URL 参数的方式实现：

// 子应用 A 跳转到子应用 B，并通过 URL 传递 userId
this.$router.push(`/app-b?userId=${userId}`);

子应用 B 在接收时，可以通过路由解析获取参数：

// 子应用 B 获取传递过来的 userId
const userId = this.$route.query.userId;

这种方式简单易用，但数据量较大时可能不适合。此外，传参的安全性也是一个问题，敏感信息不应通过这种方式传递。

2.2 基于 `props` 的主子应用通信

Qiankun 支持通过 props 将主应用的数据传递给子应用，常用于主应用与子应用之间的数据传递。

2.2.1 示例：主应用向子应用传递数据

在主应用中，我们可以在注册子应用时通过 props 传递数据：

registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:7100',
    container: '#subapp-container',
    activeRule: '/vue',
    props: { userInfo: { name: 'John', age: 30 } },  // 向子应用传递数据
  }
]);

start();

在子应用中，可以通过 props 获取传递的数据：

export default {
  props: ['userInfo'],
  mounted() {
    console.log('接收到的用户信息:', this.userInfo);
  }
};

通过 props 传递数据的方式十分直观，适合在主应用和子应用之间进行状态传递。

2.3 发布-订阅模式（Pub/Sub）

对于多个子应用需要共享状态的场景，发布-订阅模式是一种常见的解决方案。可以通过全局事件总线或自定义的事件系统来实现。

2.3.1 实现一个简单的事件总线

可以通过 window 对象在主应用中创建一个全局的事件总线：

// 主应用中创建事件总线
window.eventBus = {
  events: {},
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  },
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
};

// 在子应用中监听事件
window.eventBus.on('userUpdated', (data) => {
  console.log('子应用接收到的用户更新数据:', data);
});

当主应用中的数据发生变化时，可以触发事件来通知所有子应用：

// 主应用中触发事件
window.eventBus.emit('userUpdated', { name: 'Alice', age: 25 });

2.3.2 使用 `Mitt` 库实现事件总线

Mitt 是一个轻量的事件库，用于实现发布-订阅模式。在主应用中安装并创建事件总线：

import mitt from 'mitt';

const emitter = mitt();
window.emitter = emitter;

// 子应用中监听事件
window.emitter.on('cartUpdated', (cart) => {
  console.log('购物车更新:', cart);
});

// 主应用中触发事件
window.emitter.emit('cartUpdated', { itemCount: 5 });

发布-订阅模式非常适合多个子应用之间的全局状态同步，例如购物车更新、用户信息变化等。

2.4 基于全局状态管理的通信

如果你的项目中有复杂的状态需要共享，推荐使用全局状态管理工具来实现。例如，可以使用 Redux、Vuex、MobX 等状态管理工具来维护全局状态。

2.4.1 使用 `Redux` 共享全局状态

在主应用中配置 Redux 状态管理：

import { createStore } from 'redux';

const initialState = {
  user: null,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);
window.store = store;

子应用可以通过 window.store 获取和修改全局状态：

const user = window.store.getState().user;
console.log('子应用中的用户信息:', user);

window.store.dispatch({ type: 'SET_USER', payload: { name: 'Alice' } });

通过全局状态管理，可以确保所有子应用共享同一个数据源，并且数据变化能够自动同步到所有相关应用。

三、子应用通信的常见问题与解决方案

3.1 子应用通信时的数据丢失问题

在进行跨子应用的数据传递时，可能会遇到刷新页面或路由切换导致数据丢失的问题。为避免这种情况，可以将关键数据存储在本地存储（localStorage）或会话存储（sessionStorage）中，保证数据的持久化。

// 主应用存储数据
localStorage.setItem('userInfo', JSON.stringify({ name: 'John' }));

// 子应用获取数据
const userInfo = JSON.parse(localStorage.getItem('userInfo'));
console.log('从本地存储获取的用户信息:', userInfo);

3.2 子应用间的性能瓶颈

当子应用之间频繁通信时，可能会出现性能瓶颈，特别是在大型项目中。为避免性能问题，可以考虑对数据变化进行节流或防抖处理，减少不必要的通信频率。

// 防抖处理
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const sendMessage = debounce((message) => {
  window.eventBus.emit('message', message);
}, 300);