Vue Academy · Lektion

Delad state mellan mikrofrontends

Dela Pinia-stores, använd en event bus via CustomEvent och URL:en som delad state.

Lektion 4 av 413 steg

Delad state mellan mikrofrontends är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Utmaningen med delat tillstånd

Även oberoende mikrofrontends behöver samordnas: en inloggning i ett snitt bör uppdatera sidhuvudet i ett annat. Men tät koppling motverkar syftet. Målet är lös och medveten kommunikation.

Undvik implicit globalt tillstånd

Att lägga allt på window eller i en enorm gemensam store återskapar monolitens kopplingar. Föredra uttryckliga, minimala kontrakt mellan snitten så att teamen kan utvecklas oberoende av varandra.

CustomEvent för kommunikation

Webbläsarens API CustomEvent fungerar som en ramverksoberoende kommunikationsbuss. En mikrofrontend skickar en händelse på window, och andra lyssnar – inga gemensamma importer behövs.

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

Lyssna efter händelser

Andra snitt prenumererar med addEventListener och läser nyttolasten från event.detail. Det kopplar loss avsändare och mottagare – de behöver bara komma överens om ett händelsenamn och dess struktur.

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

Städa upp lyssnare i Vue

Registrera lyssnare i onMounted och ta bort dem i onUnmounted för att undvika läckor och dubbla händelsehanterare när komponenter monteras om.

import { onMounted, onUnmounted } from "vue"

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

Ett typat händelsekontrakt

Dokumentera händelserna som ett kontrakt så att varje team känner till namnet och nyttolastens struktur. Detta är det offentliga API:t mellan mikrofrontends.

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

URL:en som delat tillstånd

URL:en är en naturlig gemensam lagring för navigering och filter: den är global, går att bokmärka och alla snitt kan läsa den. Lägg tvärgående tillstånd, som aktivt filter eller sida, i frågeparametrar.

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

Uppdatera tillstånd i URL:en

Skriv gemensamt filter- och navigationstillstånd till URL:en med History API så att det förblir delbart och fungerar bra med bakåtknappen. Alla snitt reagerar genom att läsa den nya URL:en.

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

Singleton-Pinia-store

För mer omfattande delat tillstånd på en enda sida fungerar en singleton Pinia-store – men bara om Pinia delas som singleton genom federation, så att alla snitt använder samma instans.

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

Använda den delade storen

När Pinia delas som singleton är en store som importeras av två snitt samma store-instans – tillstånd som skrivs av det ena läses reaktivt av det andra.

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

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

Välja strategi

CustomEvent – lösa, ramverksoberoende aviseringar.
URL – navigering, filter och allt som ska kunna delas eller bokmärkas.
Singleton Pinia – omfattande reaktivt tillstånd på sidan, kräver singleton: true.

Föredra det lösaste alternativet som uppfyller behovet.

Snabbtest

Kontrollera er förståelse av tillstånd mellan mikrofrontends.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er att dela tillstånd mellan mikrofrontends:

Föredra lösa, uttryckliga kontrakt framför implicit globalt tillstånd.
CustomEvent på window tillsammans med addEventListener ger ramverksoberoende meddelanden; städa upp i onUnmounted.
URL:en (frågeparametrar via History API) innehåller delbart navigerings- och filtertillstånd.
En singleton Pinia-store delar omfattande reaktivt tillstånd, men bara med singleton: true i federation.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Delad state mellan mikrofrontends” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Delad state mellan mikrofrontends”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Delad state mellan mikrofrontends”?

Dela Pinia-stores, använd en event bus via CustomEvent och URL:en som delad state. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Delad state mellan mikrofrontends”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy