0Pricing
Vue Academy · Leçon

État partagé entre micro-frontends

Partage de stores Pinia, bus d’événements via CustomEvent et URL comme état partagé

État partagé entre micro-frontends est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Le défi du state partagé

Les micro-frontends indépendants doivent malgré tout se coordonner : un login dans un segment doit mettre à jour l’en-tête dans un autre. Mais un couplage étroit contredit leur raison d’être. L’objectif est une communication souple et délibérée.

Éviter le state global implicite

Tout placer dans window ou dans un immense magasin partagé recrée le couplage du monolithe. Préférez des contrats explicites et minimaux entre les segments afin que les équipes puissent évoluer indépendamment.

CustomEvent pour communiquer

L’API CustomEvent du navigateur est un bus indépendant des frameworks. Un micro-frontend distribue un événement sur window ; les autres l’écoutent — aucun import partagé n’est nécessaire.

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

Écouter les événements

Les autres segments s’abonnent avec addEventListener et lisent la charge utile dans event.detail. Cela découple l’émetteur et le récepteur : ils doivent seulement s’accorder sur le nom et la structure de l’événement.

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

Nettoyer les écouteurs dans Vue

Enregistrez les écouteurs dans onMounted et supprimez-les dans onUnmounted afin d’éviter les fuites et les gestionnaires en double lorsque les composants sont montés à nouveau.

import { onMounted, onUnmounted } from "vue"

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

Un contrat d’événements typé

Documentez les événements sous forme de contrat afin que chaque équipe connaisse le nom et la structure de la charge utile. Il s’agit de l’API publique entre les micro-frontends.

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

L’URL comme state partagé

L’URL est un magasin partagé naturel pour la navigation et les filtres : elle est globale, peut être ajoutée aux favoris et chaque segment peut la lire. Placez dans les paramètres de requête les éléments du state transversal, comme le filtre actif ou la page.

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

Mettre à jour le state de l’URL

Écrivez le state partagé de filtrage et de navigation dans l’URL avec l’API d’historique afin qu’il reste partageable et compatible avec le bouton Précédent. Tous les segments réagissent en lisant la nouvelle URL.

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

Magasin Pinia singleton

Pour un state partagé plus riche au sein d’une même page, un magasin Pinia singleton convient — mais uniquement si Pinia est partagé comme singleton dans la fédération afin que tous les segments utilisent la même instance.

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

Utiliser le magasin partagé

Lorsque Pinia est partagé comme singleton, le magasin importé par deux segments est la même instance de magasin : le state écrit par l’un est lu de manière réactive par l’autre.

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

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

Choisir une stratégie

  • CustomEvent — notifications souples et indépendantes des frameworks.
  • URL — navigation, filtres et tout ce qui peut être partagé ou ajouté aux favoris.
  • Singleton Pinia — state réactif riche dans la page, nécessite singleton: true.

Privilégiez l’option la moins couplée qui répond au besoin.

Vérification rapide

Vérifiez votre compréhension du state entre MFE.

Récapitulatif

Vous avez appris à partager le state entre les micro-frontends :

  • Préférez des contrats souples et explicites au state global implicite.
  • CustomEvent sur window avec addEventListener fournit une messagerie indépendante des frameworks ; nettoyez-la dans onUnmounted.
  • L’URL (paramètres de requête via l’API d’historique) contient le state de navigation et de filtrage partageable.
  • Un magasin Pinia singleton partage un state réactif riche, mais uniquement avec singleton: true dans la fédération.

Questions Fréquemment Posées

La leçon « État partagé entre micro-frontends » est-elle gratuite ?

Oui — le texte complet de « État partagé entre micro-frontends » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « État partagé entre micro-frontends » ?

Partage de stores Pinia, bus d’événements via CustomEvent et URL comme état partagé Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « État partagé entre micro-frontends » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Principes de l’architecture micro-frontend
  2. Fédération de modules Webpack avec Vue
  3. Plugin de fédération Vite
  4. État partagé entre micro-frontends
← Retour à Vue Academy