Compartir estado entre componentes Astro

Al construir un sitio con Astro, puede que necesites compartir estado entre componentes. Astro recomienda usar Nano Stores para almacenamiento compartido del lado cliente.

Receta

Instala Nano Stores:
- npm
- pnpm
- Yarn
Ventana de terminal
npm install nanostores
Ventana de terminal
pnpm add nanostores
Ventana de terminal
yarn add nanostores
Crea un store. En este ejemplo, el store registra si un diálogo está abierto o no:
src/store.js
```
import { atom } from 'nanostores';

export const isOpen = atom(false);
```

Importa y usa el store dentro de una etiqueta <script> en los componentes que compartirán estado.

Los siguientes componentes Button y Dialog usan el estado compartido isOpen para controlar si un <div> concreto se oculta o se muestra:

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

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

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

  // Agrega un event listener al botón
  document.getElementById("openDialog")?.addEventListener("click", openDialog);
</script>

<div id="dialog" style="display: none">Hello world!</div>

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

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

Recursos

Contribuir Comunidad Patrocinador