假设你正在使用基于单页面应用(SPA)的微前端框架。以下简化一个应用之间共享状态的例子。
1. 使用发布/订阅模式
// globalStateManager.js class GlobalStateManager { constructor() { this.subscribers = {}; this.state = {}; } subscribe(key, callback) { if (!this.subscribers[key]) { this.subscribers[key] = []; } this.subscribers[key].push(callback); } unsubscribe(key, callback) { if (this.subscribers[key]) { this.subscribers[key] = this.subscribers[key].filter(cb => cb !== callback); } } setState(key, value) { this.state[key] = value; if (this.subscribers[key]) { this.subscribers[key].forEach(callback => callback(value)); } } getState(key) { return this.state[key]; } } export const globalStateManager = new GlobalStateManager();
2. 在主应用中初始化全局状态管理
在主应用中,你可以初始化这个全局状态管理库,并可能暴露一些API给子应用使用。
// mainApp.js import { registerMicroApps, start } from 'qiankun'; import { globalStateManager } from './globalStateManager'; // 假设你有一个全局状态需要同步 globalStateManager.setState('user', { name: 'John Doe' }); // ... 其他主应用代码 ... // 暴露一些API给子应用使用(可选) window.globalStateApi = { subscribe: globalStateManager.subscribe.bind(globalStateManager), unsubscribe: globalStateManager.unsubscribe.bind(globalStateManager), getState: globalStateManager.getState.bind(globalStateManager) }; // 注册并启动微前端 registerMicroApps(/* ... */); start();
3. 在子应用中使用全局状态
// childApp.js // 订阅全局状态变化 window.globalStateApi.subscribe('user', (user) => { console.log('User updated:', user); // 更新你的组件状态或执行其他操作 }); // 获取全局状态 const user = window.globalStateApi.getState('user'); console.log('Initial user state:', user); // ... 其他子应用代码 ...
在真实的生产环境中,你可能需要处理更复杂的情况,如错误处理、状态持久化、跨域问题等。不同的微前端框架和库可能有自己的方式来处理全局状态管理。考虑使用现有的状态管理解决方案(如Redux或MobX)与自定义的发布/订阅模式结合使用,以实现更复杂和可维护的全局状态管理。
还没有评论,来说两句吧...