Vue Academy · Lekcja

Współdzielony stan między mikrofrontendami

Współdzielenie store Pinia, magistrala zdarzeń przez CustomEvent oraz URL jako współdzielony stan.

Współdzielony stan między mikrofrontendami to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Wyzwanie związane ze współdzielonym stanem

Niezależne mikrofrontendy nadal muszą się ze sobą koordynować: logowanie w jednym wycinku powinno aktualizować nagłówek w innym. Ścisłe powiązania niweczą jednak sens takiej architektury. Celem jest luźna, przemyślana komunikacja.

Unikanie niejawnego stanu globalnego

Umieszczenie wszystkiego w obiekcie window lub w jednym ogromnym współdzielonym store odtwarza powiązania znane z monolitu. Należy preferować jawne, minimalne kontrakty między wycinkami, aby zespoły mogły niezależnie rozwijać swoje rozwiązania.

CustomEvent do komunikacji

Przeglądarkowe API CustomEvent jest niezależnym od frameworka kanałem komunikacji. Jeden mikrofrontend wysyła zdarzenie za pomocą obiektu window, a pozostałe go nasłuchują — bez konieczności współdzielenia importów.

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

Nasłuchiwanie zdarzeń

Inne wycinki subskrybują zdarzenia za pomocą addEventListener i odczytują dane z event.detail. Rozdziela to nadawcę i odbiorcę — muszą oni uzgodnić jedynie nazwę zdarzenia i strukturę danych.

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

Usuwanie nasłuchiwaczy w Vue

Należy rejestrować nasłuchiwacze w onMounted i usuwać je w onUnmounted, aby uniknąć wycieków oraz zduplikowanych obsługujących zdarzenia przy ponownym montowaniu komponentów.

import { onMounted, onUnmounted } from "vue"

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

Typowany kontrakt zdarzeń

Należy opisać zdarzenia jako kontrakt, aby każdy zespół znał ich nazwę i strukturę danych. Jest to publiczne API między mikrofrontendami.

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

Adres URL jako współdzielony stan

Adres URL jest naturalnym współdzielonym magazynem na potrzeby nawigacji i filtrów: ma zasięg globalny, można go dodać do zakładek, a każdy wycinek może go odczytać. Stan dotyczący wielu obszarów, taki jak aktywny filtr lub strona, należy umieszczać w parametrach zapytania.

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

Aktualizowanie stanu w adresie URL

Należy zapisywać współdzielony stan filtrów i nawigacji w adresie URL za pomocą History API, aby można było go udostępniać i wygodnie korzystać z przycisku Wstecz. Wszystkie wycinki reagują, odczytując nowy adres URL.

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

Singletonowy store Pinia

W przypadku bogatszego współdzielonego stanu w obrębie jednej strony sprawdzi się singletonowy store Pinia — ale tylko wtedy, gdy Pinia jest współdzielona jako singleton w całej federacji, aby wszystkie wycinki korzystały z tej samej instancji.

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

Korzystanie ze współdzielonego store

Gdy Pinia jest współdzielona jako singleton, store zaimportowany przez dwa wycinki jest tą samą instancją store. Stan zapisany przez jeden wycinek jest reaktywnie odczytywany przez drugi.

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

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

Wybór strategii

CustomEvent — luźne, niezależne od frameworka powiadomienia.
URL — nawigacja, filtry i wszystko, co można udostępniać lub dodawać do zakładek.
Singleton Pinia — bogaty, reaktywny stan w obrębie strony, wymagający singleton: true.

Należy wybierać opcję najmniej wiążącą, która spełnia wymagania.

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat stanu współdzielonego między mikrofrontendami.

Podsumowanie

Poznali Państwo sposoby współdzielenia stanu między mikrofrontendami:

Należy preferować luźne, jawne kontrakty zamiast niejawnego stanu globalnego.
CustomEvent na obiekcie window wraz z addEventListener zapewnia niezależną od frameworka komunikację; nasłuchiwacze należy usuwać w onUnmounted.
Adres URL (parametry zapytania obsługiwane przez History API) przechowuje możliwy do udostępniania stan nawigacji i filtrów.
Singletonowy store Pinia współdzieli bogaty, reaktywny stan, ale tylko przy ustawieniu singleton: true w federacji.

Często zadawane pytania

Czy lekcja „Współdzielony stan między mikrofrontendami” jest bezpłatna?

Tak — pełny tekst „Współdzielony stan między mikrofrontendami” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Współdzielony stan między mikrofrontendami”?

Współdzielenie store Pinia, magistrala zdarzeń przez CustomEvent oraz URL jako współdzielony stan. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Współdzielony stan między mikrofrontendami”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zasady architektury mikrofrontendów
Webpack Module Federation z Vue
Wtyczka Vite Federation
Współdzielony stan między mikrofrontendami

← Powrót do Vue Academy