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

**之火2024-05-27 14:17

假设你正在使用基于单页面应用（SPA）的微前端框架。以下简化一个应用之间共享状态的例子。

1. 使用发布/订阅模式

javascript 复制代码

// 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给子应用使用。

javascript 复制代码

// 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. 在子应用中使用全局状态

javascript 复制代码

// 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）与自定义的发布/订阅模式结合使用，以实现更复杂和可维护的全局状态管理。

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

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