微前端统一状态树实现方案
微前端统一状态树实现方案
一、背景与目标
在微前端架构中，各子应用通常由不同团队开发并独立部署。但在实际业务中，它们往往需要共享一些核心状态信息，如：
- 当前登录用户信息
- 权限与角色列表
- 国际化语言偏好
- 系统主题/布局配置
- 页面缓存/导航状态
为避免各子应用重复维护状态、数据不一致、重复请求，建议引入“统一状态树”机制，即主应用集中管理全局状态，并将状态以订阅/注入方式共享给子应用。
二、适用框架
| 框架 | 是否支持统一状态共享 | 实现方式 |
|---|---|---|
| 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 状态缓存
等场景中落地。根据使用框架选择合理的数据同步机制，可实现低耦合、高一致性的微前端架构。