qiankun通信方式

props通信

// 主应用注册子应用时传递 props
registerMicroApps([
  {
    name: 'childApp',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/child',
    props: { 
      // 传递静态数据
      globalData: { version: '1.0' },
      // 传递函数实现"子调父"
      onEvent: (data) => console.log('收到子应用消息:', data)
    }
  }
]);

// 子应用通过 props 接收
export async function mount(props) {
  console.log(props.globalData); // 读取主应用数据
  props.onEvent({ type: 'FROM_CHILD' }); // 触发主应用回调
}

customEvent

// 主应用或任意应用发送事件
const event = new CustomEvent('global-event', {
  detail: { type: 'MSG', payload: '数据内容' }
});
window.dispatchEvent(event);

// 子应用监听事件
window.addEventListener('global-event', (e) => {
  console.log('收到全局事件:', e.detail);
});

// 注意：卸载时需移除监听

initGlobalState

// ---------------- 主应用初始化 ----------------
import { initGlobalState } from 'qiankun';

// 初始化状态（可包含任意数据类型）
const initialState = { user: { name: 'Admin' }, token: null };
const actions = initGlobalState(initialState);

// 监听状态变化
actions.onGlobalStateChange((state, prevState) => {
  console.log('全局状态变更:', prevState, '→', state);
});

// 暴露状态操作方法
export { actions };

// ---------------- 子应用使用 ----------------
// 获取全局状态对象
export async function mount(props) {
  // 监听变化（需在卸载时取消订阅）
  props.onGlobalStateChange((state, prev) => {
    console.log('子应用收到状态更新:', state);
  });
  
  // 更新全局状态（自动合并）
  props.setGlobalState({ token: 'NEW_TOKEN' });
  
  // 完全覆盖状态（慎用）
  // props.setGlobalState({ ...state, newProp: 'value' }, true);
}

// ---------------- 状态操作API说明 ----------------
// setGlobalState(state: object, deepMerge?: boolean)
// onGlobalStateChange(callback: Function)
// offGlobalStateChange()

localStorage

// 应用A写入
localStorage.setItem('SHARED_KEY', JSON.stringify(data));

// 应用B监听
window.addEventListener('storage', (e) => {
  if (e.key === 'SHARED_KEY') {
    console.log('存储数据变化:', JSON.parse(e.newValue));
  }
});

postmessage

// 应用A
const channel = new BroadcastChannel('app-channel');
channel.postMessage({ type: 'MSG' });

// 应用B
const channel = new BroadcastChannel('app-channel');
channel.onmessage = (e) => console.log(e.data);