Condividere lo stato tra diversi componenti Astro

Consiglio

Utilizzi componenti di un framework JS? Scopri come condividere lo stato tra Isole (EN)!

Quando sviluppi un sito con Astro, potresti aver bisogno di condividere lo stato tra diversi componenti. Astro raccomanda l’utilizzo di Nano Stores per salvare lo stato condiviso lato client.

Soluzione

Sezione intitolata Soluzione

1. Installa Nano Stores:

npm

npm install nanostores

pnpm

pnpm add nanostores

Yarn

yarn add nanostores

2. Crea uno store. In questo esempio, lo store tiene traccia dello stato della finestra di dialogo (aperta o meno):

src/store.js

import { atom } from 'nanostores';

export const isOpen = atom(false);

3. Importa e utilizza lo store in un tag <script> nel componente che condividerà lo stato.

I componenti Button e Dialog qui di seguito condividono entrambi lo stato isOpen per controllare se uno specifico <div> è nascosto o meno:

src/components/Button.astro

<button id="openDialog">Open</button>

<script>
  import { isOpen } from '../store.js';

  // Imposta lo store - isOpen - a true quando si clicca sul pulsante
  function openDialog() {
    isOpen.set(true);
  }

  // Aggiunge un event listener al pulsante
  document.getElementById('openDialog').addEventListener('click', openDialog);
</script>

src/components/Dialog.astro

<div id="dialog" style="display: none">Hello world!</div>

<script>
  import { isOpen } from '../store.js';

  // Si mette in ascolto di modifiche allo store, e mostra/nasconde la finestra di dialogo di conseguenza
  isOpen.subscribe(open => {
    if (open) {
      document.getElementById('dialog').style.display = 'block';
    } else {
      document.getElementById('dialog').style.display = 'none';
    }
  })
</script>

Risorse aggiuntive

Sezione intitolata Risorse aggiuntive

• Nano Stores su NPM
• Documentazione di Nano Stores per Vanilla JS