Compartilhe estado entre componentes Astro

Dica

Usando componentes de um framework? Veja como compartilhar estado entre Ilhas!

Enquanto constrói um website Astro, você pode precisar compartilhar estado entre componentes. Astro recomenda o uso de Nano Stores para armazenamento compartilhado no cliente.

Receita

Seção intitulada Receita

1. Instale Nano Stores:

npm

npm install nanostores

pnpm

pnpm add nanostores

Yarn

yarn add nanostores

2. Crie uma store. Nesse exemplo, a store irá rastrear se uma caixa de diálogo está aberta ou não:

src/store.js

import { atom } from 'nanostores';

export const estaAberto = atom(false);

3. Importe e use a store em uma tag <script> nos componentes que irão compartilhar estado.

Os componentes Botao e Dialogo a seguir usam o estado compartilhado estaAberto para controlar se uma <div> em particular está oculta ou visível:

src/components/Botao.astro

<button id="abrirDialogo">Abrir</button>

<script>
  import { estaAberto } from '../store.js';

  // Definir a store para true quando o botão for clicado
  function abrirDialogo() {
    estaAberto.set(true);
  }

  // Adicionar um listener de evento ao botão
  document.getElementById('abrirDialogo').addEventListener('click', abrirDialogo);
</script>

src/components/Dialogo.astro

<div id="dialogo" style="display: hidden">Olá mundo!</div>

<script>
  import { estaAberto } from '../store.js';

  // Ouvir mudanças na store, e mostrar/ocultar a caixa de diálogo de acordo
  estaAberto.subscribe(open => {
    if (open) {
      document.getElementById('dialogo').style.display = 'block';
    } else {
      document.getElementById('dialogo').style.display = 'none';
    }
  })
</script>

Recursos

Seção intitulada Recursos

• Nano Stores no NPM
• Documentação de Nano Stores para JS puro