Vue Academy · Урок

Общее состояние между микрофронтендами

Общий доступ к хранилищам Pinia, шина событий через CustomEvent и URL как общее состояние

«Общее состояние между микрофронтендами» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Проблема общего state

Независимым микрофронтендам все же нужно координировать работу: login в одном срезе должен обновить заголовок в другом. Но тесная связанность сводит на нет саму идею. Цель — слабосвязное, продуманное взаимодействие.

Избегайте неявного глобального state

Если складывать все в window или огромное общее хранилище, вы воссоздаете связанность монолита. Предпочитайте явные минимальные контракты между срезами, чтобы команды могли развиваться независимо.

CustomEvent для взаимодействия

API браузера CustomEvent — это шина, не зависящая от фреймворка. Один микрофронтенд создает событие на 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 как общее state

URL — естественное общее хранилище для навигации и фильтров: он глобален, его можно добавить в закладки, и каждый срез может его прочитать. Помещайте state, общее для разных частей приложения, например активный фильтр или страницу, в params запроса.

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

Обновление state в URL

Записывайте общее state навигации и фильтров в URL с помощью API истории, чтобы им можно было делиться и чтобы кнопка возврата работала ожидаемым образом. Все срезы реагируют, считывая новый URL.

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

Одиночное хранилище Pinia

Для более сложного общего state в пределах одной страницы подойдет одиночное хранилище Pinia, но только если Pinia используется как единственный экземпляр во всей федерации, чтобы все срезы обращались к одному экземпляру.

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

Использование общего хранилища

Если Pinia используется как единственный экземпляр, хранилище, импортированное двумя срезами, является одним и тем же экземпляром хранилища — state, записанное одним срезом, другой считывает реактивно.

// 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 — богатое реактивное state внутри страницы; требует singleton: true.

Выбирайте наиболее слабосвязанный вариант, который решает задачу.

Быстрая проверка

Проверьте, насколько вы понимаете state между MFE.

Повторение

Вы научились делиться state между микрофронтендами:

Предпочитайте слабосвязанные явные контракты неявному глобальному state.
CustomEvent на window вместе с addEventListener обеспечивает обмен сообщениями, не зависящий от фреймворка; удаляйте обработчики в onUnmounted.
URL (params запроса через API истории) хранит доступные для общего использования данные навигации и фильтров.
Одиночное хранилище Pinia предоставляет богатое реактивное state, но только при наличии singleton: true в федерации.

Часто задаваемые вопросы

Урок «Общее состояние между микрофронтендами» бесплатный?

Да — полный текст урока «Общее состояние между микрофронтендами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Общее состояние между микрофронтендами»?

Общий доступ к хранилищам Pinia, шина событий через CustomEvent и URL как общее состояние Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Общее состояние между микрофронтендами»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy