Partager l'état entre les composants Astro

Astuce

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

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

Titre de la section Méthode

1. Installer Nano Stores:

   npm

   npm install nanostores

   pnpm

   pnpm add nanostores

   Yarn

   yarn add nanostores

2. Créez un store. Dans cet exemple, le store 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 store 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 à 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 store et affiche/masque le dialogue en conséquence
     isOpen.subscribe(open => {
       if (open) {
         document.getElementById('dialog').style.display = 'block';
       } else {
         document.getElementById('dialog').style.display = 'none';
       }
     })
   </script>

Resources

Titre de la section Resources

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