Vue Academy · Oppitunti

Jaettu tila mikrofrontendien välillä

Pinia-storejen jakaminen, CustomEventiin perustuva tapahtumaväylä ja URL jaettuna tilana

Oppitunti 4/413 vaihetta

Jaettu tila mikrofrontendien välillä on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Jaetun tilan haaste

Itsenäisten mikro-frontendien on silti koordinoitava toimintaansa: yhden siivun kirjautumisen pitäisi päivittää toisen siivun otsake. Tiivis kytkentä kuitenkin kumoaa koko lähestymistavan hyödyn. Tavoitteena on löyhä ja harkittu viestintä.

Välttäkää implisiittistä globaalia tilaa

Kaiken sijoittaminen window-olioon tai yhteen suureen jaettuun storeen palauttaa monoliitin kytkökset. Suosikaa siivujen välisiä eksplisiittisiä ja mahdollisimman pieniä sopimuksia, jotta tiimit voivat kehittää niitä itsenäisesti.

CustomEvent viestinnässä

Selaimen CustomEvent-API on kehyksistä riippumaton tapahtumaväylä. Yksi mikro-frontend lähettää tapahtuman window-oliolle ja muut kuuntelevat sitä — yhteisiä importteja ei tarvita.

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

Tapahtumien kuunteleminen

Muut siivut tilaavat tapahtumia addEventListener-kutsulla ja lukevat hyötykuorman event.detail-ominaisuudesta. Tämä irrottaa lähettäjän ja vastaanottajan toisistaan — niiden tarvitsee sopia vain tapahtuman nimestä ja rakenteesta.

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

Kuuntelijoiden siivoaminen Vuessa

Rekisteröikää kuuntelijat onMounted-kutsussa ja poistakaa ne onUnmounted-kutsussa, jotta muistivuodot ja päällekkäiset käsittelijät vältetään komponenttien uudelleenliittämisen yhteydessä.

import { onMounted, onUnmounted } from "vue"

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

Tyypitetty tapahtumasopimus

Dokumentoikaa tapahtumat sopimuksena, jotta jokainen tiimi tuntee nimen ja hyötykuorman rakenteen. Tämä on mikro-frontendien välinen julkinen API.

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

URL jaettuna tilana

URL on luonteva jaettu säilö navigoinnille ja suodattimille: se on globaali, sen voi lisätä kirjanmerkkeihin ja jokainen siivu voi lukea sen. Sijoittakaa kaikkia siivuja koskeva tila, kuten aktiivinen suodatin tai sivu, kyselyparametreihin.

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

URL-tilan päivittäminen

Kirjoittakaa jaettu suodatin- ja navigointitila URL-osoitteeseen History API:n avulla, jotta se säilyy jaettavana ja selaimen takaisin-painike toimii luontevasti. Kaikki siivut reagoivat lukemalla uuden URL-osoitteen.

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

Singleton Pinia -store

Rikkaampaan jaettuun tilaan yhdellä sivulla sopii singleton Pinia -store — mutta vain, jos Pinia jaetaan singletonina federoinnin kautta, jotta kaikki siivut käyttävät samaa instanssia.

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

Jaetun storen käyttäminen

Kun Pinia jaetaan singletonina, kahden siivun importtaama store on sama store-instanssi — yhden siivun kirjoittaman tilan toinen lukee reaktiivisesti.

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

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

Strategian valinta

CustomEvent — löyhät, frameworkista riippumattomat ilmoitukset.
URL — navigointi, suodattimet ja kaikki, minkä voi jakaa tai lisätä kirjanmerkkeihin.
Singleton Pinia — monipuolinen reaktiivinen tila yhdellä sivulla; edellyttää asetusta singleton: true.

Suosikaa tarpeeseen riittävää, mahdollisimman löyhää vaihtoehtoa.

Pikatarkistus

Tarkistakaa, miten hyvin ymmärrätte MFE:iden välisen tilan.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte jakamaan tilaa mikro-frontendien välillä:

Suosikaa löyhiä ja eksplisiittisiä sopimuksia implisiittisen globaalin tilan sijaan.
CustomEvent window-oliossa yhdessä addEventListener-kutsun kanssa tarjoaa kehyksistä riippumattoman viestinnän; siivotkaa kuuntelijat onUnmounted-kutsussa.
URL-osoite (History API:n kautta asetetut kyselyparametrit) säilyttää jaettavan navigointi- ja suodatintilan.
Singleton Pinia -store jakaa monipuolisen reaktiivisen tilan, mutta vain federoinnin asetuksella singleton: true.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Jaettu tila mikrofrontendien välillä” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Jaettu tila mikrofrontendien välillä”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Jaettu tila mikrofrontendien välillä”?

Pinia-storejen jakaminen, CustomEventiin perustuva tapahtumaväylä ja URL jaettuna tilana Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Jaettu tila mikrofrontendien välillä”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Mikrofrontend-arkkitehtuurin periaatteet
Webpack Module Federation Vuen kanssa
Vite Federation -lisäosa
Jaettu tila mikrofrontendien välillä

← Takaisin: Vue Academy