Vue微前端中状态无法直接跨应用共享，需通过主应用托管全局Store、微前端框架内置通信机制或Web Components封装状态容器实现；须注意沙箱限制、响应式代理隔离、版本兼容及持久化同步等关键细节。
Vue 状态在微前端中无法直接跨应用共享，因为每个子应用都是独立的 Vue 实例，彼此没有组件树继承关系，provide/inject 和 Vuex 实例 都被天然隔离。真正可行的方式是绕过 Vue 实例边界，借助外部机制实现状态同步。
用主应用托管统一 Store（推荐中大型项目）
主应用创建并维护一个全局 Pinia 或 Vuex 实例，通过安全方式暴露给子应用访问：
- 主应用初始化 store 后挂载到
window.__MICRO_APP_STORE__（注意加前缀避免污染） - 子应用启动时检查该全局变量，若存在则复用；否则 fallback 到本地 store
- 必须在子应用卸载时清理监听（如
store.$onAction或subscribe），防止内存泄漏 - 建议封装统一接入层，自动处理生命周期绑定与错误降级
借助微前端框架的全局状态能力
qiankun、micro-app 等框架已内置跨应用通信机制，无需额外引入事件总线：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- qiankun 使用
initGlobalState初始化状态，子应用通过onGlobalStateChange监听、setGlobalState修改 - micro-app 提供
dispatch和addListener，支持类型提示和沙箱兼容 - 这些 API 底层已处理 iframe 沙箱、JS 隔离、生命周期同步，比手动
CustomEvent更可靠
用 Web Components 封装可跨框架的状态容器
将核心状态逻辑抽离为自定义元素（如 <x-shared-state>），利用浏览器原生能力穿透框架边界：
立即学习“前端免费学习笔记（深入）”；
- 基于
customElements.define注册，支持 Vue/React/Angular 子应用直接使用 - 内部用
localStorage或IndexedDB持久化，配合storage事件广播变更 - 适合用户偏好、主题、语言等低频更新、高一致性要求的状态
- 避免依赖特定框架运行时，天然适配未来技术栈演进
避免踩坑的关键细节
跨应用状态共享不是简单“把 store 挂到 window 上”就能跑通：
-
不共享响应式代理本身：子应用不能直接
watch主应用 store 的 reactive 对象，需转为普通对象或用事件通知 -
不绕过沙箱限制：qiankun 的 JS 沙箱会拦截
window属性修改，暴露 store 必须在沙箱激活前完成（如bootstrap阶段） -
不忽略版本兼容：主子应用使用的 Pinia 版本差异可能导致
$state结构不一致，建议锁定 minor 版本 -
不遗漏持久化同步：登录态等关键状态需同时写入
localStorage，防止子应用刷新后丢失
