微前端子应用如何共享主应用的全局状态？

欧阳红彦提问于 2026-03-07 15:29:20 阅读 5

框架

我在用 qiankun 搭微前端，主应用用的是 Vuex，现在子应用也想读写主应用 store 里的用户信息，但不知道怎么安全地共享。试过把 store 挂到 window 上，但感觉不靠谱，而且 TypeScript 报错。

有没有更规范的做法？比如通过 props 传进去？但子应用是独立部署的，props 又没法动态更新……

目前主应用注册子应用的代码大概是这样：

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8081',
    container: '#subapp-viewport',
    activeRule: '/app1',
    props: { sharedStore: store } // 这样传进去子应用能响应式更新吗？
  }
]);

我来解答赞 1 收藏

反馈

1 条解答

西门俊锡 Lv1

用 qiankun 的 initGlobalState 最靠谱，官方推荐做法。主应用这样初始化：

import { initGlobalState } from 'qiankun';

const state = { user: store.state.user };

const actions = initGlobalState(state);



// 监听变化

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

  console.log('主应用收到变更', state, prev);

});



// 子应用这样获取和修改：

export function mount(props) {

  props.onGlobalStateChange((state) => {

    // 更新子应用状态

  });

  props.setGlobalState({ user: newUser });

}

这比挂 window 或 props 传 store 都稳，还能跨应用通信。TS 类型也容易处理。

2026-03-07 16:14