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

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

<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

Contribuir Comunidad Patrocinador