Aller au contenu

Partager l'état entre les composants Astro

:::tipVous 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 install nanostores

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

    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 :

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

Contribuer Communauté Parrainer