微前端子应用之间怎么共享全局状态？

开发者俊美提问于 2026-03-30 17:59:14 阅读 1

框架

我用 qiankun 搭了个微前端项目，主应用和两个子应用都需要读写同一个用户信息。试过在主应用里用 const globalState = {} 然后通过 props 传给子应用，但子应用修改后主应用收不到更新，状态不同步。

看文档说可以用 initGlobalState，但我不太确定怎么在 React 子应用里订阅变化。有没有人用过这种方案？能给个简单的例子吗？

import { initGlobalState } from 'qiankun';

const actions = initGlobalState({ user: null });

actions.onGlobalStateChange((state, prev) => {
  console.log('state change', state, prev);
});

// 在子应用里怎么安全地 setGlobalState 并触发更新？

我来解答赞 5 收藏

反馈

1 条解答

米娅🍀 Lv1

我之前踩过这个坑，qiankun 的状态共享确实有点绕。你在主应用里用 initGlobalState 是对的，但关键是在子应用中要正确地订阅和更新状态。

在 React 子应用里，你需要在生命周期钩子里注册全局状态监听器，并且要在组件卸载时清理它，不然会内存泄漏。另外，setGlobalState 要确保是同步操作，不然可能会丢失更新。

给你个简单的例子：

import { useEffect } from 'react';

import { initGlobalState, MicroAppStateActions } from 'qiankun';



let globalState;

let actions: MicroAppStateActions;



function useGlobalUser() {

  const [user, setUser] = useState(null);



  useEffect(() => {

    actions.onGlobalStateChange((state, prev) => {

      if (state.user !== prev.user) {

        setUser(state.user);

      }

    }, true); // 第二个参数设为true表示立即触发一次



    return () => {

      // 记得清理监听

      actions.offGlobalStateChange();

    };

  }, []);



  const updateUser = (newUser) => {

    actions.setGlobalState({ user: newUser });

  };



  return [user, updateUser];

}

记得在子应用启动时初始化 actions：

export async function bootstrap() {

  console.log('react app bootstraped');

}



export async function mount(props) {

  actions = initGlobalState(props);

  ReactDOM.render(<App />, document.getElementById('root'));

}

这样每个子应用都能独立管理用户信息了，修改后其他应用也能收到更新。别忘了处理边界情况，比如用户信息为空之类的。折腾了几天才搞定这玩意儿，希望能帮到你。

2026-03-30 18:06