0Pricing
Vue Academy · Lezione

Stato condiviso tra micro-frontend

Condivisione degli store Pinia, event bus tramite CustomEvent, URL come stato condiviso.

Stato condiviso tra micro-frontend è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

La sfida dello stato condiviso

Anche i micro-frontend indipendenti devono coordinarsi: un login in una slice dovrebbe aggiornare l'header in un'altra. Tuttavia, un accoppiamento stretto vanifica lo scopo dell'architettura. L'obiettivo è una comunicazione debole e deliberata.

Eviti lo stato globale implicito

Mettere tutto in window o in un enorme store condiviso ricrea l'accoppiamento del monolite. Preferisca contratti espliciti e minimali tra le slice, così i team possono evolvere indipendentemente.

CustomEvent per la comunicazione

L'API CustomEvent del browser è un bus indipendente dal framework. Un micro-frontend invia un evento su window; gli altri lo ascoltano, senza richiedere import condivisi.

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

Ascolto degli eventi

Le altre slice si registrano con addEventListener e leggono il payload da event.detail. Questo disaccoppia mittente e destinatario: devono concordare soltanto sul nome dell'evento e sulla struttura del payload.

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

Rimozione degli ascoltatori in Vue

Registri gli ascoltatori in onMounted e li rimuova in onUnmounted per evitare perdite di memoria e handler duplicati quando i componenti vengono montati nuovamente.

import { onMounted, onUnmounted } from "vue"

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

Un contratto tipizzato per gli eventi

Documenti gli eventi come un contratto, in modo che ogni team conosca il nome e la struttura del payload. Questa è l'API pubblica tra i micro-frontend.

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

L'URL come stato condiviso

L'URL è uno store condiviso naturale per la navigazione e i filtri: è globale, può essere aggiunto ai segnalibri e ogni slice può leggerlo. Inserisca nei parametri di query lo stato trasversale, come il filtro attivo o la pagina corrente.

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

Aggiornamento dello stato nell'URL

Scriva lo stato condiviso di filtri e navigazione nell'URL tramite la History API, così resterà condivisibile e compatibile con il pulsante Indietro. Tutte le slice reagiscono leggendo il nuovo URL.

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

Store Pinia singleton

Per uno stato condiviso più ricco all'interno di una singola pagina, uno store Pinia singleton è una soluzione efficace, ma solo se Pinia viene condiviso come singleton attraverso la federation, in modo che tutte le slice utilizzino la stessa istanza.

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

Utilizzo dello store condiviso

Quando Pinia è condiviso come singleton, uno store importato da due slice è la stessa istanza di store: lo stato scritto da una viene letto reattivamente dall'altra.

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

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

Scelta della strategia

  • CustomEvent — notifiche debolmente accoppiate e indipendenti dal framework.
  • URL — navigazione, filtri e tutto ciò che può essere condiviso o aggiunto ai segnalibri.
  • Singleton Pinia — stato reattivo ricco all'interno della pagina; richiede singleton: true.

Preferisca l'opzione meno accoppiata che soddisfa l'esigenza.

Verifica rapida

Verifichi la Sua comprensione dello stato condiviso tra MFE.

Riepilogo

Ha imparato a condividere lo stato tra micro-frontend:

  • Preferisca contratti espliciti e debolmente accoppiati allo stato globale implicito.
  • CustomEvent su window e addEventListener forniscono messaggistica indipendente dal framework; esegua la pulizia in onUnmounted.
  • L'URL (parametri di query tramite la History API) contiene lo stato condivisibile della navigazione e dei filtri.
  • Uno store Pinia singleton condivide uno stato reattivo ricco, ma solo con singleton: true nella federation.

Domande Frequenti

La lezione «Stato condiviso tra micro-frontend» è gratuita?

Sì — il testo completo di «Stato condiviso tra micro-frontend» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Stato condiviso tra micro-frontend»?

Condivisione degli store Pinia, event bus tramite CustomEvent, URL come stato condiviso. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Stato condiviso tra micro-frontend»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Principi dell'architettura micro-frontend
  2. Module Federation di Webpack con Vue
  3. Plugin Vite Federation
  4. Stato condiviso tra micro-frontend
← Torna a Vue Academy