Compartir estado entre componentes de Astro

Consejo

¿Usas componentes de framework? Consulta cómo compartir estado entre Islands!

Al construir un sitio web con Astro, puede que necesites compartir estado entre componentes. Astro recomienda el uso de Nano Stores para almacenamiento compartido en el cliente.

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 usa el store en una etiqueta <script> en los componentes que compartirán estado.

   Los siguientes componentes Button y Dialog usan cada uno el estado compartido isOpen para controlar si un <div> particular está oculto o visible:

   src/components/Button.astro

   <button id="openDialog">Open</button>
   
   <script>
     import { isOpen } from '../store.js';
   
     // Set the store to true when the button is clicked
     function openDialog() {
       isOpen.set(true);
     }
   
     // Add an event listener to the button
     document.getElementById('openDialog').addEventListener('click', openDialog);
   </script>

   src/components/Dialog.astro

   <div id="dialog" style="display: none">Hello world!</div>
   
   <script>
     import { isOpen } from '../store.js';
   
     // Listen to changes in the store, and show/hide the dialog accordingly
     isOpen.subscribe(open => {
       if (open) {
         document.getElementById('dialog').style.display = 'block';
       } else {
         document.getElementById('dialog').style.display = 'none';
       }
     })
   </script>

Recursos

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