Vue Academy · Aula

Estado compartilhado entre micro-frontends

Compartilhamento de stores do Pinia, barramento de eventos com CustomEvent e URL como estado compartilhado.

Aula 4 de 413 etapas

Estado compartilhado entre micro-frontends é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O desafio do estado compartilhado

Microfrontends independentes ainda precisam se coordenar: um login em um recorte deve atualizar o cabeçalho em outro. Mas o acoplamento forte contradiz o objetivo. A meta é uma comunicação desacoplada e intencional.

Evite o estado global implícito

Colocar tudo em window ou em um armazenamento compartilhado gigante recria o acoplamento do monólito. Prefira contratos explícitos e mínimos entre os recortes para que as equipes possam evoluir de forma independente.

CustomEvent para comunicação

A API CustomEvent do navegador é um barramento independente de estrutura. Um microfrontend dispara um evento em window; os outros escutam — sem necessidade de importações compartilhadas.

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

Escutando eventos

Os outros recortes se inscrevem com addEventListener e leem a carga útil de event.detail. Isso desacopla o emissor do receptor — eles precisam concordar apenas com o nome e o formato do evento.

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

Limpando ouvintes no Vue

Registre os ouvintes em onMounted e remova-os em onUnmounted para evitar vazamentos e manipuladores duplicados quando os componentes forem montados novamente.

import { onMounted, onUnmounted } from "vue"

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

Um contrato de eventos tipado

Documente os eventos como um contrato para que todas as equipes conheçam o nome e o formato da carga útil. Essa é a API pública entre os microfrontends.

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

A URL como estado compartilhado

A URL é um armazenamento compartilhado natural para navegação e filtros: é global, pode ser adicionada aos favoritos e todos os recortes podem lê-la. Coloque estados transversais, como o filtro ativo ou a página, nos parâmetros de consulta.

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

Atualizando o estado da URL

Escreva o estado compartilhado de filtros e navegação na URL usando a API de histórico, para que ele continue compartilhável e funcione bem com o botão Voltar. Todos os recortes reagem lendo a nova URL.

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

Armazenamento Pinia de instância única

Para um estado compartilhado mais rico em uma única página, um armazenamento Pinia de instância única funciona — mas somente se o Pinia for compartilhado como instância única na federação, para que todos os recortes usem a mesma instância.

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

Usando o armazenamento compartilhado

Com o Pinia compartilhado como instância única, um armazenamento importado por dois recortes é a mesma instância de armazenamento — o estado escrito por um é lido reativamente pelo outro.

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

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

Escolhendo uma estratégia

CustomEvent — notificações desacopladas e independentes de estrutura.
URL — navegação, filtros e qualquer conteúdo que possa ser compartilhado ou adicionado aos favoritos.
Pinia de instância única — estado reativo rico na página; exige singleton: true.

Prefira a opção menos acoplada que atenda à necessidade.

Verificação rápida

Verifique sua compreensão do estado entre MFE.

Responda na aula interativa

Recapitulação

Você aprendeu a compartilhar estado entre microfrontends:

Prefira contratos explícitos e desacoplados ao estado global implícito.
CustomEvent em window + addEventListener fornece mensagens independentes de estrutura; faça a limpeza em onUnmounted.
A URL (parâmetros de consulta por meio da API de histórico) armazena estados compartilháveis de navegação e filtros.
Um armazenamento Pinia de instância única compartilha um estado reativo rico, mas somente com singleton: true na federação.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Estado compartilhado entre micro-frontends” é grátis?

Sim — o texto completo de “Estado compartilhado entre micro-frontends” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Estado compartilhado entre micro-frontends”?

Compartilhamento de stores do Pinia, barramento de eventos com CustomEvent e URL como estado compartilhado. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Estado compartilhado entre micro-frontends”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Princípios da arquitetura de micro-frontends
Module Federation do Webpack com Vue
Plugin de Federation do Vite
Estado compartilhado entre micro-frontends

← Voltar para Vue Academy