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

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

一、背景与目标

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

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

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

二、适用框架

框架 是否支持统一状态共享 实现方式
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 为例)

ts 复制代码
// main-app/src/shared/emitter.ts
import mitt from 'mitt'
export const emitter = mitt()
ts 复制代码
// 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 为例)

ts 复制代码
// 子应用 main.ts
const app = createApp(App)
app.config.globalProperties.$emitter = props.emitter
app.provide('userInfo', props.userInfo)
app.mount('#app')
ts 复制代码
// 子应用组件中
onMounted(() => {
  const emitter = inject('$emitter')
  emitter?.on('theme-changed', (newTheme) => {
    localStore.theme = newTheme
  })
})

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

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

ts 复制代码
// main-app/src/shared/useSharedStore.ts
export const sharedStore = reactive({ user: {}, theme: 'light' })
export const useSharedStore = () => sharedStore
ts 复制代码
// 子应用内使用(需通过 props 注入 useSharedStore)
const shared = useSharedStore()
watch(() => shared.theme, (val) => {
  applyTheme(val)
})

七、注意事项

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

八、总结

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

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

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

相关推荐
_请输入用户名7 分钟前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式
爱学习的茄子8 分钟前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
龙在天9 分钟前
我是前端,我来总结一下前端 配 Nginx 的一些案例
前端
Thetimezipsby12 分钟前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
掘金安东尼24 分钟前
前端周刊430期(2025年9月1日–9月7日)
前端
BUG创建者30 分钟前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频
就是帅我不改37 分钟前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
JackJiang38 分钟前
转转客服IM系统的WebSocket集群架构设计和部署方案
前端
codeGoogle38 分钟前
大厂研发之谜:千亿投入砸出利润大缩水
前端·人工智能·后端
菲兹园长1 小时前
CSS(展示效果)
前端·javascript·css