Pular para o conteúdo

Compartilhe estado entre componentes Astro

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:
Terminal window
npm install nanostores
  1. 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);
  1. 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