Comparte el estado entre componentes de Astro

Consejo

¿Estás usando componentes de framework? Mira como compartir el estado entre Islas!

Cuando construyes un sitio web con Astro, es posible que necesites compartir el estado entre componentes. Astro recomienda el uso de Nano Stores para el almacenamiento compartido del cliente.

Receta

Sección titulada Receta

1. Instala Nano Stores:

npm

npm install nanostores

pnpm

pnpm add nanostores

Yarn

yarn add nanostores

2. Crea un store. En este ejemplo, el store rastrea si un diálogo está abierto o no:

src/store.js

import { atom } from 'nanostores';

export const isOpen = atom(false);

3. Importa y utiliza el store en una etiqueta <script> en los componentes que compartirán el estado.

Los siguientes componentes Button y Dialog utilizan el estado compartido isOpen para controlar si un <div> en particular está oculto o mostrado:

src/components/Button.astro

<button id="openDialog">Open</button>

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

  // Configura el store a true cuando se hace clic en el botón
  function openDialog() {
    isOpen.set(true);
  }

  // Agrega un escuchador de eventos al botón
  document.getElementById('openDialog').addEventListener('click', openDialog);
</script>

src/components/Dialog.astro

<div id="dialog" style="display: hidden">¡Hola Mundo!</div>

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

  // Escucha los cambios en el store y muestra/oculta el diálogo en consecuencia
  isOpen.subscribe(open => {
    if (open) {
      document.getElementById('dialog').style.display = 'block';
    } else {
      document.getElementById('dialog').style.display = 'none';
    }
  })
</script>

Recursos

Sección titulada Recursos

• Nano Stores en NPM
• Documentación de Nano Stores para Vanilla JS