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
  1. 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);
  1. 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">Ouvert</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