Partager l'état entre les composants Astro

Astuce

Vous utilisez des composants de Framework ? Voir comment partager l’état entre les îlots!

Lors de la création d’un site web Astro, il se peut que vous deviez partager l’état des composants. Astro recommande l’utilisation de Nano Stores pour le stockage partagé des clients.

Méthode

1. Installez Nano Stores:

   npm

   npm install nanostores

   pnpm

   pnpm add nanostores

   Yarn

   yarn add nanostores

2. Créez un magasin. Dans cet exemple, le magasin indique si un dialogue est ouvert ou non :

   src/store.js

   import { atom } from 'nanostores';
   
   export const isOpen = atom(false);

3. Importez et utilisez le magasin dans une balise <script> dans les composants qui partageront l’état.

   Les composants Button et Dialog suivants utilisent chacun l’état partagé isOpen pour contrôler si une <div> particulière est cachée ou affichée :

   src/components/Button.astro

   <button id="openDialog">Ouvrir</button>
   
   <script>
     import { isOpen } from '../store.js';
   
     // Définir le magasin sur true lorsque le bouton est cliqué
     function openDialog() {
       isOpen.set(true);
     }
   
     // Ajouter un écouteur d'événement au bouton
     document.getElementById('openDialog').addEventListener('click', openDialog);
   </script>

   src/components/Dialog.astro

   <div id="dialog" style="display: hidden">Hello world!</div>
   
   <script>
     import { isOpen } from '../store.js';
   
     // Écouter les changements dans le magasin et afficher/masquer le dialogue en conséquence
     isOpen.subscribe(open => {
       if (open) {
         document.getElementById('dialog').style.display = 'block';
       } else {
         document.getElementById('dialog').style.display = 'none';
       }
     })
   </script>

Ressources

• Nano Stores sur NPM
• Documentation de Nano Stores pour Vanilla JS