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.

  1. Instala Nano Stores:
Terminal window
npm install nanostores
  1. 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);
  1. 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';
}
})
document.getElementById('openDialog').addEventListener('click', openDialog);
</script>