Saltearse al contenido

Comparte el estado entre componentes de Astro

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

Instala Nano Stores:

npm install nanostores

pnpm add nanostores

yarn add nanostores

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

import { atom } from 'nanostores';

export const isOpen = atom(false);

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:

<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>

<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