Vue Academy · 课时

跨微前端共享状态

Q: 「跨微前端共享状态」这节课中我会学到什么？

共享 Pinia 存储、通过 CustomEvent 实现事件总线，以及将 URL 作为共享状态 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

共享 Pinia 存储、通过 CustomEvent 实现事件总线，以及将 URL 作为共享状态

跨微前端共享状态 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

共享状态的挑战

独立的微前端仍然需要协作：一个切片中的 login 操作应该更新另一个切片中的页头。但紧耦合会违背微前端的初衷。目标是实现松散且有意设计的通信。

避免隐式全局状态

将所有内容堆放到 window 上，或使用一个庞大的共享存储，会重新造成单体应用的耦合。请优先在切片之间使用明确且精简的契约，以便团队能够独立演进。

使用 CustomEvent 进行通信

浏览器的 CustomEvent API 是一种与框架无关的通信总线。一个微前端在 window 上分发事件，其他微前端负责监听——无需共享导入内容。

const event = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 },
})
window.dispatchEvent(event)

监听事件

其他切片通过 addEventListener 订阅事件，并从 event.detail 读取载荷。这样可以解耦发送方和接收方——双方只需约定事件名称和数据结构。

window.addEventListener("cart:add", (e) => {
  console.log("Added", e.detail.productId)
})

在 Vue 中清理监听器

在 onMounted 中注册监听器，并在 onUnmounted 中移除它们，以避免组件重新挂载时出现内存泄漏和重复处理器。

import { onMounted, onUnmounted } from "vue"

function onAdd(e) { /* ... */ }
onMounted(() => window.addEventListener("cart:add", onAdd))
onUnmounted(() => window.removeEventListener("cart:add", onAdd))

类型化事件契约

将事件记录为契约，让每个团队都了解事件名称和载荷结构。这就是微前端之间的公共 API。

// events contract
// "cart:add"    -> { productId: number, qty: number }
// "auth:login"  -> { userId: string }
// "auth:logout" -> {}

将 URL 作为共享状态

URL 是存储导航状态和筛选条件的自然选择：它是全局的、可添加书签的，并且每个切片都能读取它。请将活动筛选条件或页面等跨领域状态放入查询 params 中。

const params = new URLSearchParams(location.search)
const category = params.get("category") // shared across slices

更新 URL 状态

使用历史记录 API 将共享的筛选和导航状态写入 URL，使其便于分享并支持后退按钮。所有切片都会读取新的 URL 并作出响应。

function setCategory(value) {
  const url = new URL(location.href)
  url.searchParams.set("category", value)
  history.pushState({}, "", url)
}

单例 Pinia 存储

对于单个页面中更丰富的共享状态，单例 Pinia 存储很有效——但前提是要在模块联邦中将 Pinia 作为单例共享，以便所有切片使用同一个实例。

// federation config (both sides)
shared: {
  pinia: { singleton: true },
  vue: { singleton: true },
}

使用共享存储

当 Pinia 作为单例共享时，由两个切片导入的存储实际上是同一个存储实例——一个切片写入的状态，另一个切片可以响应式地读取。

// slice A writes
const auth = useAuthStore()
auth.login(user)

// slice B reads the same reactive state
const auth = useAuthStore()
console.log(auth.user)

选择策略

CustomEvent——松散且与框架无关的通知。
URL——用于导航、筛选条件以及任何可分享或可添加书签的内容。
单例 Pinia——丰富的页面内响应式状态，但需要设置 singleton: true。

请优先选择能够满足需求的最松耦合方案。

快速检查

检查您对跨 MFE 状态的理解。

回顾

您学习了如何在微前端之间共享状态：

优先使用松散、明确的契约，而不是隐式全局状态。
在 window 上使用 CustomEvent 并配合 addEventListener，即可实现与框架无关的消息传递；请在 onUnmounted 中清理监听器。
URL（通过历史记录 API 保存查询 params）可以存储可分享的导航和筛选状态。
单例 Pinia 存储可以共享丰富的响应式状态，但只有在模块联邦中设置 singleton: true 时才有效。

常见问题解答

「跨微前端共享状态」课时是免费的吗？

是的 — 「跨微前端共享状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「跨微前端共享状态」这节课中我会学到什么？

共享 Pinia 存储、通过 CustomEvent 实现事件总线，以及将 URL 作为共享状态你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「跨微前端共享状态」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy