Aller au contenu

Partage d'état entre composants Astro

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:

    Fenêtre de terminal
    npm install 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