微前端主子应用传值 使用 Props 还是 LocalStorage

在微前端（Qiankun）架构中，推荐优先使用 Props（主子应用传值） ，而将 LocalStorage 作为持久化的兜底方案。

以下是详细的对比分析和建议：

1. 为什么 Props 更好？（推荐）

在微前端架构中，Props 是主应用和子应用之间通信的“官方渠道”。

• 单一数据源（Single Source of Truth） ： 主应用（Host）已经请求了 getInfo 并拿到了最新的用户信息。通过 Props 下发，子应用直接使用这份“热乎”的数据，保证了主子应用数据绝对一致。

• 无视跨域/域名限制： LocalStorage 是基于域名的。

  • 如果你的主应用在 a.com，子应用在 b.com（或者端口不同且未做特殊处理），LocalStorage 是不互通的。子应用根本拿不到主应用存的 __bd_current_info。
  • 而 Props 是基于 JavaScript 内存传递的，无论域名怎么配置，都能完美传递。

• 响应式更新： 如果主应用中切换了“项目”或“租户”，导致 userInfo 发生变化，通过 Props（配合 GlobalState 或 Vue 的响应式），子应用可以立即感知并更新。而 LocalStorage 变了，子应用通常需要刷新页面才能读到新值。

• 解耦： 使用 Props，子应用只需要知道“我启动时会收到 userInfo”，而不需要知道“数据存在 LocalStorage 的哪个 Key 里”。这让子应用更纯粹。

2. LocalStorage 的作用是什么？

LocalStorage 在这里依然很有用，但它的角色是  “持久化” ，而不是  “通信” 。

• 主应用侧：主应用刷新页面（F5）时，Vuex/Pinia 数据会丢失，此时主应用需要从 LocalStorage 恢复数据（或者重新请求接口）。你的 connector 项目中 user-persistent.js 就是做这个的。
• 子应用侧（独立运行时） ：如果开发人员单独启动子应用（不经过主应用），Props 为空，此时子应用可以尝试读取 LocalStorage（如果域名一致）或重新请求接口作为兜底。

3. 最佳实践流程

“LocalStorage 负责持久化主应用，Props 负责同步给子应用”

理想的数据流向：

1. 浏览器刷新 -> 主应用读取 LocalStorage (__bd_current_info) 恢复 Vuex 状态。
2. 主应用加载子应用 -> 主应用将 Vuex 中的 userInfo 通过 Props 传给子应用。
3. 子应用挂载 (mount)  -> 子应用读取 Props，存入自己的 Vuex。
4. 子应用业务逻辑 -> 需要用户信息时，直接从子应用 Vuex 取，拦截掉 getInfo 请求。

结论：使用 Props 方案

虽然 LocalStorage 里有数据，但依赖它来做微前端通信会带来域名隔离、数据不同步、Key 值耦合等隐患。通过 主应用 下发 Props，并在子应用  中接收的方案是 最标准且性能最好 的解决 微前端主子应用传值问题 的方法。