qiankun的通信方式

在使用 qiankun 微前端框架时，主应用与微应用之间的通信是一个重要的考虑点。qiankun 没有限定一个固定的通信方式，开发者可以根据实际需求选择最合适的通信机制。以下是一些常见的通信方式：

1. Props 传递

在 qiankun 中，主应用可以通过 props 的方式向微应用传递信息。这包括但不限于数据、方法或者回调函数。

// 主应用
import { loadMicroApp } from 'qiankun';

const microApp = loadMicroApp({
  name: 'someApp',
  entry: '//localhost:8080',
  container: '#container',
  props: {
    // 传递给子应用的数据
    data: { key: 'value' },
    // 传递给子应用的方法
    parentFunction: () => {
      console.log('This function is from the parent app');
    },
  },
});

// 微应用
export async function mount(props) {
  console.log(props); // { data: { key: 'value' }, parentFunction: f }
  props.parentFunction();
}

2. Custom Events (自定义事件)

主应用和微应用可以通过自定义事件进行通信。这种方式适合于跨微应用的事件广播。

// 发送事件
window.dispatchEvent(new CustomEvent('eventName', { detail: { key: 'value' } }));

// 接收事件
window.addEventListener('eventName', (e) => {
  console.log(e.detail); // { key: 'value' }
});

3. 全局状态管理

利用 Redux、Vuex 或者简单的全局变量，结合观察者模式，可以实现主应用和微应用间的状态共享。

// 在主应用中设置
window.globalState = { key: 'value' };

// 在微应用中获取
console.log(window.globalState.key); // 'value'

4. Local Storage / Session Storage

对于一些不需要实时通信，但需要共享持久数据的场景，可以使用 Local Storage 或 Session Storage

// 主应用设置
localStorage.setItem('key', 'value');

// 微应用获取
console.log(localStorage.getItem('key')); // 'value'

5. WebSockets

对于需要实时通信的场景，可以在主应用和微应用中分别使用 WebSockets 建立持久连接。

// WebSocket 示例
const socket = new WebSocket('ws://your-websocket-server');
socket.onmessage = function(event) {
  console.log(`Data received from server: ${event.data}`);
};