微前端子应用间共享状态时，状态更新不同步怎么办？

这个问题其实挺常见的，根本原因是你把状态更新和状态读取耦合在一起了——子应用监听到事件后，直接去读 window.__GLOBAL_STATE__，但这时候主应用可能还没把新值写进去，或者写入还没完成，导致读到旧值。

按照规范，状态共享得用“发布-订阅”模型，而不是靠事件+全局变量这种“手写轮子”方式。qiankun 官方其实推荐用 props + useGlobalState 的方式，或者直接用一个独立的状态库，比如 zustand 或 micro-store。

最简单的做法是：把状态中心化，放到一个独立的 JS 模块里，主应用和子应用都从这个模块里 get 和 set，模块内部用 EventTarget 或 Proxy 做依赖通知，而不是靠 postMessage。

举个最简实现（别写在全局污染 window）：

// shared-state.js

const state = {

  user: null,

};

const listeners = new Set();



export const getGlobalState = () => state;



export const setGlobalState = (newState) => {

  Object.assign(state, newState);

  listeners.forEach((fn) => fn(state));

};



export const subscribe = (fn) => {

  listeners.add(fn);

  // 初始化时先触发一次，避免子应用加载后拿不到初始值

  fn(state);

  return () => listeners.delete(fn);

};

主应用里：

import { setGlobalState } from './shared-state.js';



setGlobalState({ user: { name: 'Alice', auth: true } });

子应用里（比如 React）：

import { useEffect, useState } from 'react';

import { getGlobalState, subscribe } from './shared-state.js';



function UserInfo() {

  const [user, setUser] = useState(getGlobalState().user);



  useEffect(() => {

    const unsubscribe = subscribe((state) => {

      setUser(state.user);

    });

    return () => unsubscribe();

  }, []);



  return <div>{user?.name}</div>;

}

这样每个子应用自己订阅，状态更新是同步的，没有延迟，也不依赖事件顺序。子应用首次挂载时通过 getGlobalState() 就能拿到最新值，不会丢。

另外别用 localStorage 做高频状态同步，除非你做的是离线优先的场景，那种开销确实大，而且容易触发浏览器节流。

如果你们项目已经用了 qiankun，也可以考虑用它的 qiankun-vue 或 qiankun-react 的官方状态共享方案，比如 useGlobalState，但底层原理其实差不多，都是靠模块共享 + 订阅通知。

别再靠 postMessage 手动传 payload 了，那个太容易出错，特别是子应用加载时机不一致的时候。

改成用事件总线的方式同步状态，主应用和子应用都监听同一个事件中心。主应用发消息时带上最新状态，子应用收到后更新自己的状态。

const EventBus = {

  listeners: {},

  on(event, callback) {

    if (!this.listeners[event]) this.listeners[event] = [];

    this.listeners[event].push(callback);

  },

  emit(event, data) {

    if (this.listeners[event]) {

      this.listeners[event].forEach(callback => callback(data));

    }

  }

};



// 主应用发送状态

window.__GLOBAL_STATE__.user = {name: 'Alice', auth: true};

EventBus.emit('STATE_UPDATE', window.__GLOBAL_STATE__.user);



// 子应用监听状态

EventBus.on('STATE_UPDATE', (newState) => {

  console.log('收到状态更新:', newState);

  // 更新子应用内部状态

});

记得在每个子应用加载时主动拉取一次最新状态，避免初始化延迟问题。