微前端框架之定义全局状态管理库（五）

假设你正在使用基于单页面应用（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);  // ... 其他子应用代码 ...