微前端统一状态树实现方案

微前端统一状态树实现方案

一、背景与目标

在微前端架构中，各子应用通常由不同团队开发并独立部署。但在实际业务中，它们往往需要共享一些核心状态信息，如：

• 当前登录用户信息
• 权限与角色列表
• 国际化语言偏好
• 系统主题/布局配置
• 页面缓存/导航状态

为避免各子应用重复维护状态、数据不一致、重复请求，建议引入“统一状态树”机制，即主应用集中管理全局状态，并将状态以订阅/注入方式共享给子应用。

二、适用框架

框架	是否支持统一状态共享	实现方式
Qiankun	✅ 支持	props + mitt/EventBus + store
micro-app	✅ 内置支持	setData / onDataChange
Hel	✅ 支持	HelContext 全局共享
Wujie	⚠️ 间接支持	window 注入 / iframe 通信
Emp / ice.js	✅ 支持	共享模块 / external store

三、统一状态树架构设计

主应用
├── Vuex/Pinia/Redux（集中状态）
├── 状态变更 => 广播通知（mitt/onDataChange）
├── 注册子应用 => 传入初始状态与通信机制
│
├── 子应用1.vue
│   ├── 接收 props.user / props.emitter
│   ├── onMounted: 注册监听
│   └── watch props 变化 => 更新本地 store
│
├── 子应用2.vue
│   ├── 使用 props 作为初始化上下文
│   └── 主动向主应用请求数据

四、主应用实现方式（以 Qiankun + Vue 为例）

// main-app/src/shared/emitter.ts
import mitt from 'mitt'
export const emitter = mitt()

// main-app/src/registerApps.ts
registerMicroApps([
  {
    name: 'sub-app',
    entry: 'https://xxx.com/sub-app/',
    container: '#sub-container',
    activeRule: '/sub',
    props: {
      emitter,               // 事件总线
      userInfo: store.state.user,
      theme: store.state.theme,
    }
  }
])

五、子应用处理方式（以 Vue 为例）

// 子应用 main.ts
const app = createApp(App)
app.config.globalProperties.$emitter = props.emitter
app.provide('userInfo', props.userInfo)
app.mount('#app')

// 子应用组件中
onMounted(() => {
  const emitter = inject('$emitter')
  emitter?.on('theme-changed', (newTheme) => {
    localStore.theme = newTheme
  })
})

六、进阶方案：使用共享 store 工厂函数

主应用暴露可复用的共享状态钩子，子应用直接调用。

// main-app/src/shared/useSharedStore.ts
export const sharedStore = reactive({ user: {}, theme: 'light' })
export const useSharedStore = () => sharedStore

// 子应用内使用（需通过 props 注入 useSharedStore）
const shared = useSharedStore()
watch(() => shared.theme, (val) => {
  applyTheme(val)
})

七、注意事项

• 子应用切换时务必执行 cleanup：移除监听器、重置状态
• 禁止子应用“反向更改”主状态（主应用为唯一源）
• 避免深度双向绑定，采用事件驱动

八、总结

统一状态树是实现微前端平台级体验一致性的重要手段，建议优先在：

• 登录态共享
• 权限体系统一
• 国际化语言 / 主题联动
• UI 状态缓存

等场景中落地。根据使用框架选择合理的数据同步机制，可实现低耦合、高一致性的微前端架构。