Qiankun 全局状态通信

概述本项目使用 qiankun 的initGlobalStateAPI 实现主应用与子应用之间的数据通信。主应用创建全局状态子应用通过 props 接收通信 API实现双向数据传递。架构┌─────────────────────────────────────────┐ │ 主应用 (src/) │ │ │ │ actions.ts │ │ ├─ initGlobalState(initialState) │ │ ├─ onGlobalStateChange(cb) │ │ └─ setGlobalState(state) │ │ │ │ │ │ 通过 registerMicroApps props │ │ ▼ │ │ ┌──────────┬──────────┬──────────┐ │ │ │ sub-react│ sub-vue │sub-jquery│ │ │ └──────────┴──────────┴──────────┘ │ └─────────────────────────────────────────┘核心文件文件说明src/micro-app/actions.ts全局状态定义与 API 封装src/App.tsx主应用注册子应用时传递 actionssub-react/src/main.tsxReact 子应用接入通信sub-vue/src/main.tsVue 子应用接入通信sub-jquery/src/main.jsjQuery 子应用接入通信API 说明setGlobalState(state)— 修改全局状态// 主应用中import{setGlobalState}from./micro-app/actions;setGlobalState({user:{name:admin,token:xxx}});setGlobalState({theme:dark});参数为PartialGlobalState会与当前状态浅合并不是替换只传需要更新的字段即可其他字段保持不变onGlobalStateChange(callback, fireImmediately?)— 监听状态变化onGlobalStateChange((state,prev){console.log(新状态:,state);console.log(旧状态:,prev);},true);callback状态变化时触发参数为新状态和旧状态fireImmediately是否立即触发一次默认trueGlobalState类型定义// src/micro-app/actions.tsexportinterfaceGlobalState{user?:{name:string;token:string;};theme?:light|dark;[key:string]:unknown;// 允许扩展任意字段}按业务需要扩展字段即可。各子应用接入方式React 子应用通信 API 挂载到window.__POWERED_BY_QIANKUN_ACTIONS__组件内直接访问// 任意 React 组件中 const actions (window as any).__POWERED_BY_QIANKUN_ACTIONS__; // 监听状态 actions?.onGlobalStateChange((state) { console.log(收到主应用数据:, state); }, true); // 修改状态子应用也可向主应用发数据 actions?.setGlobalState({ theme: dark });Vue 子应用通过app.provide注入组件内用inject获取script setup langts import { inject } from vue; const { onGlobalStateChange, setGlobalState } inject(qiankunActions) as { onGlobalStateChange: (cb: Function, fire?: boolean) void; setGlobalState: (state: unknown) void; }; onGlobalStateChange((state) { console.log(收到主应用数据:, state); }, true); /scriptjQuery 子应用在render函数中直接接收 actions 参数functionrender(container,actions){// 监听状态actions?.onGlobalStateChange((state,prev){console.log(收到主应用数据:,state);},true);// 修改状态actions?.setGlobalState({someKey:value});}注意事项1. 状态合并是浅合并setGlobalState执行的是浅合并不是深合并。嵌套对象需要整体替换// 错误 — 不会合并 user 内部字段setGlobalState({user:{name:newName}});// 结果: user { name: newName }token 丢失// 正确 — 整体替换 user 对象setGlobalState({user:{name:newName,token:existingToken}});2. 避免频繁触发onGlobalStateChange每次状态变化都会触发回调。如果子应用中多个组件都监听需要注意性能// 推荐在根组件监听一次通过组件内部状态分发 useEffect(() { const unsubscribe onGlobalStateChange((state) { setLocalState(state); }, true); return unsubscribe; }, []);3. 子应用独立运行时无通信当子应用独立运行不通过 qiankun 加载时onGlobalStateChange和setGlobalState为undefined。代码中需要做空值判断if(actions?.onGlobalStateChange){actions.onGlobalStateChange(callback);}4. unmount 时清理监听子应用卸载时应清理监听避免内存泄漏// ReactuseEffect((){actions?.onGlobalStateChange(callback);return(){/* 清理逻辑 */};},[]);// VueonUnmounted((){/* 清理逻辑 */});// jQuery — 已在 destroy() 中置空 actions 引用5. 不要存储大量数据全局状态适合传递轻量级的共享数据用户信息、主题、权限标识等。不要将大量业务数据放入全局状态应通过 API 请求获取。6. 类型安全TypeScript 项目中使用时从src/micro-app/actions.ts导入类型importtype{GlobalState}from../micro-app/actions;