Partage d'État

Lors de la construction d’un site web Astro avec l’architecture isolée / hydratation partielle, vous avez peut-être rencontré ce problème : Je veux partager l’état entre mes composants.

Les frameworks d’interface utilisateur tels que React ou Vue peuvent encourager l’utilisation de fournisseurs de “contexte” pour que d’autres composants puissent les consommer. Mais lorsque vous hydratez partiellement des composants dans Astro ou Markdown, vous ne pouvez pas utiliser ces enveloppes contextuelles.

Astro recommande une solution différente pour le stockage partagé côté client : les Nano Stores.

Méthode associée : Partage d'état entre composants Astro

Pourquoi Nano Stores ?

La bibliothèque Nano Stores vous permet de créer des stores avec lesquels n’importe quel composant peut interagir. Nous recommandons Nano Stores pour les raisons suivantes :

Ils sont légers. Nano Stores contient le strict minimum de JS dont vous aurez besoin (moins de 1 Ko) sans aucune dépendance.
Ils sont agnostiques. Cela signifie que le partage d’état entre les frameworks sera fera de manière transparent ! Astro est basé sur la flexibilité, c’est pourquoi nous aimons les solutions qui offrent une expérience de développement similaire, quelle que soit votre préférence.

Il existe néanmoins un certain nombre d’alternatives que vous pouvez explorer. En voici quelques-unes :

Les Stores intégrés de Svelte
Les signaux de SolidJS en dehors du contexte d’un composant
API de réactivité de Vue
L’envoi d’événements de navigateur personnalisés entre les composants

🙋 Puis-je utiliser Nano Stores dans des fichiers .astro ou d’autres composants côté serveur ?

Nano Stores peut être importé, écrit et lu dans les composants côté serveur, mais nous ne le recommandons pas ! Ceci est dû à quelques restrictions :

L’écriture d’un store à partir d’un fichier .astro ou composant non hydraté n’affectera pas la valeur reçue par les composants côté client.
Vous ne pouvez pas transmettre un Nano Store en tant que prop aux composants côté client.
Vous ne pouvez pas vous abonner aux mises à jour du store à partir d’un fichier .astro, puisque les composants Astro ne se rafraîchissent pas.

Si vous comprenez ces restrictions et que vous trouvez toujours un cas d’utilisation, vous pouvez essayer Nano Stores ! N’oubliez pas que les Nano Stores sont conçus pour être réactifs aux changements sur le client spécifiquement.

🙋 En quoi les Stores de Svelte sont-ils différents de Nano Stores ?

Nano Stores et les Svelte Stores sont très similaires ! En effet, Nano Stores vous permettent d’utiliser le même raccourci $ pour les abonnements que vous pourriez utiliser avec Svelte stores.

Si vous voulez éviter les bibliothèques tierces, les Svelte Stores constituent à eux seuls un excellent outil de communication inter-îles. Néanmoins, vous pouvez préférerer Nano Stores si :

Vous aimez leurs modules complémentaires pour les objets et l’état asynchrone.
Ou si vous souhaitez communiquer entre Svelte et d’autres frameworks d’interface utilisateur comme Preact ou Vue.

🙋 Comment Solid signals est-il différent de Nano Stores ?

Si vous utilisez Solid depuis un certain temps, vous avez peut-être essayé de déplacer les “signals” ou stores en dehors de vos composants. C’est un excellent moyen de partager l’état entre les îles de composants Solid ! Essayez d’exporter des “signals” à partir d’un fichier partagé :

import { createSignal } from 'solid-js';

export const sharedCount = createSignal(0);

…et tous les composants important sharedCount partageront le même état. Bien que cela fonctionne bien, vous préférerez peut-être Nano Stores si a) vous aimez leurs modules complémentaires pour “objects” et async state, ou b) vous souhaitez communiquer entre Solid et d’autres frameworks d’interface utilisateur comme Preact ou Vue.

Installer Nano Stores

Pour commencer, installez Nano Stores avec son package d’assistance pour votre framework d’interface utilisateur préféré :

npm install nanostores @nanostores/preact

npm install nanostores @nanostores/react

npm install nanostores @nanostores/solid

npm install nanostores @nanostores/vue

npm install nanostores

Vous pouvez aller directement dans le guide d’utilisation de Nano Stores à partir d’ici, ou suivez notre exemple ci-dessous !

Disons que nous construisons une interface de e-commerce simple avec trois éléments interactifs :

Un formulaire de soumission “ajouter au panier”
Un menu déroulant du panier pour afficher les articles ajoutés
Une bascule de chariot

Essayez l’exemple complété sur votre machine ou en ligne via Stackblitz.

Votre fichier Astro de base peut ressembler à ceci :

---
import CartFlyoutToggle from '../components/CartFlyoutToggle';
import CartFlyout from '../components/CartFlyout';
import AddToCartForm from '../components/AddToCartForm';
---

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
  <header>
    <nav>
      <a href="/">Vitrine Astro</a>
      <CartFlyoutToggle client:load />
    </nav>
  </header>
  <main>
    <AddToCartForm client:load>
    <!-- ... -->
    </AddToCartForm>
  </main>
  <CartFlyout client:load />
</body>
</html>

Utilisation des “atoms”

Commençons par ouvrir notre CartFlyout chaque fois que CartFlyoutToggle est cliqué.

Tout d’abord, créez un nouveau fichier JS ou TS pour contenir notre store. Nous utiliserons un “atom” pour cela :

import { atom } from 'nanostores';

export const isCartOpen = atom(false);

Maintenant, nous pouvons importer ce store dans n’importe quel fichier qui doit le lire ou y écrire. Nous allons commencer par câbler notre CartFlyoutToggle :

import { useStore } from '@nanostores/preact';
import { isCartOpen } from '../cartStore';

export default function CartButton() {
  // lire la valeur du store avec le hook `useStore`
  const $isCartOpen = useStore(isCartOpen);
  // write to the imported store using `.set`
  return (
    <button onClick={() => isCartOpen.set(!$isCartOpen)}>Cart</button>
  )
}

import { useStore } from '@nanostores/react';
import { isCartOpen } from '../cartStore';

export default function CartButton() {
  // read the store value with the `useStore` hook
  const $isCartOpen = useStore(isCartOpen);
  // write to the imported store using `.set`
  return (
    <button onClick={() => isCartOpen.set(!$isCartOpen)}>Cart</button>
  )
}

import { useStore } from '@nanostores/solid';
import { isCartOpen } from '../cartStore';

export default function CartButton() {
  // read the store value with the `useStore` hook
  const $isCartOpen = useStore(isCartOpen);
  // write to the imported store using `.set`
  return (
    <button onClick={() => isCartOpen.set(!$isCartOpen())}>Cart</button>
  )
}

<script>
  import { isCartOpen } from '../cartStore';
</script>

<!--use "$" to read the store value-->
<button on:click={() => isCartOpen.set(!$isCartOpen)}>Cart</button>

<template>
  <!--write to the imported store using `.set`-->
  <button @click="isCartOpen.set(!$isCartOpen)">Cart</button>
</template>

<script setup>
  import { isCartOpen } from '../cartStore';
  import { useStore } from '@nanostores/vue';

  // read the store value with the `useStore` hook
  const $isCartOpen = useStore(isCartOpen);
</script>

import { LitElement, html } from 'lit';
import { isCartOpen } from '../cartStore';

export class CartFlyoutToggle extends LitElement {
  handleClick() {
    isCartOpen.set(!isCartOpen.get());
  }

  render() {
    return html`
      <button @click="${this.handleClick}">Cart</button>
    `;
  }
}

customElements.define('cart-flyout-toggle', CartFlyoutToggle);

Ensuite, nous pouvons lire isCartOpen à partir de notre composant CartFlyout :

import { useStore } from '@nanostores/preact';
import { isCartOpen } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);

  return $isCartOpen ? <aside>...</aside> : null;
}

import { useStore } from '@nanostores/react';
import { isCartOpen } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);

  return $isCartOpen ? <aside>...</aside> : null;
}

import { useStore } from '@nanostores/solid';
import { isCartOpen } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);

  return $isCartOpen() ? <aside>...</aside> : null;
}

<script>
  import { isCartOpen } from '../cartStore';
</script>

{#if $isCartOpen}
<aside>...</aside>
{/if}

<template>
  <aside v-if="$isCartOpen">...</aside>
</template>

<script setup>
  import { isCartOpen } from '../cartStore';
  import { useStore } from '@nanostores/vue';

  const $isCartOpen = useStore(isCartOpen);
</script>

import { isCartOpen } from '../cartStore';
import { LitElement, html } from 'lit';
import { StoreController } from '@nanostores/lit';

export class CartFlyout extends LitElement {
  private cartOpen = new StoreController(this, isCartOpen);

  render() {
    return this.cartOpen.value ? html`<aside>...</aside>` : null;
  }
}

customElements.define('cart-flyout', CartFlyout);

Utilisation des “maps”

Maintenant, gardons une trace des articles dans votre panier. Pour éviter les doublons et garder une trace de la “quantité”, nous pouvons stocker votre panier en tant qu’objet avec l’ID de l’article comme clé. Nous utiliserons une Map pour ça.

Ajoutons un magasin cartItem à notre cartStore.js de plus tôt. Vous pouvez également passer à un fichier TypeScript pour définir la forme si vous le souhaitez.

import { atom, map } from 'nanostores';

export const isCartOpen = atom(false);

/**
 * @typedef {Object} CartItem
 * @property {string} id
 * @property {string} name
 * @property {string} imageSrc
 * @property {number} quantity
 */

/** @type {import('nanostores').MapStore<Record<string, CartItem>>} */
export const cartItems = map({});

import { atom, map } from 'nanostores';

export const isCartOpen = atom(false);

export type CartItem = {
  id: string;
  name: string;
  imageSrc: string;
  quantity: number;
}

export const cartItems = map<Record<string, CartItem>>({});

Maintenant, exportons un assistant addCartItem pour que nos composants l’utilisent.

Si cet article n’existe pas dans votre panier, ajoutez l’article avec une quantité de départ de 1.
Si cet article existe déjà, augmentez la quantité de 1.

...
export function addCartItem({ id, name, imageSrc }) {
  const existingEntry = cartItems.get()[id];
  if (existingEntry) {
    cartItems.setKey(id, {
      ...existingEntry,
      quantity: existingEntry.quantity + 1,
    })
  } else {
    cartItems.setKey(
      id,
      { id, name, imageSrc, quantity: 1 }
    );
  }
}

...
type ItemDisplayInfo = Pick<CartItem, 'id' | 'name' | 'imageSrc'>;
export function addCartItem({ id, name, imageSrc }: ItemDisplayInfo) {
  const existingEntry = cartItems.get()[id];
  if (existingEntry) {
    cartItems.setKey(id, {
      ...existingEntry,
      quantity: existingEntry.quantity + 1,
    });
  } else {
    cartItems.setKey(
      id,
      { id, name, imageSrc, quantity: 1 }
    );
  }
}

Avec notre store en place, nous pouvons appeler cette fonction dans notre AddToCartForm chaque fois que ce formulaire est soumis. Nous ouvrirons également le menu déroulant du panier afin que vous puissiez voir un résumé complet du panier.

import { addCartItem, isCartOpen } from '../cartStore';

export default function AddToCartForm({ children }) {
  // we'll hardcode the item info for simplicity!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }

  return (
    <form onSubmit={addToCart}>
      {children}
    </form>
  )
}

import { addCartItem, isCartOpen } from '../cartStore';

export default function AddToCartForm({ children }) {
  // we'll hardcode the item info for simplicity!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }

  return (
    <form onSubmit={addToCart}>
      {children}
    </form>
  )
}

import { addCartItem, isCartOpen } from '../cartStore';

export default function AddToCartForm({ children }) {
  // we'll hardcode the item info for simplicity!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }

  return (
    <form onSubmit={addToCart}>
      {children}
    </form>
  )
}

<form on:submit|preventDefault={addToCart}>
  <slot></slot>
</form>

<script>
  import { addCartItem, isCartOpen } from '../cartStore';

  // we'll hardcode the item info for simplicity!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart() {
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }
</script>

<template>
  <form @submit="addToCart">
    <slot></slot>
  </form>
</template>

<script setup>
  import { addCartItem, isCartOpen } from '../cartStore';

  // we'll hardcode the item info for simplicity!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }
</script>

import { LitElement, html } from 'lit';
import { isCartOpen, addCartItem } from '../cartStore';

export class AddToCartForm extends LitElement {
  static get properties() {
    return {
      item: { type: Object },
    };
  }

  constructor() {
    super();
    this.item = {};
  }

  addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(this.item);
  }

  render() {
    return html`
      <form @submit="${this.addToCart}">
        <slot></slot>
      </form>
    `;
  }
}
customElements.define('add-to-cart-form', AddToCartForm);

Enfin, nous afficherons ces éléments de panier dans notre CartFlyout :

import { useStore } from '@nanostores/preact';
import { isCartOpen, cartItems } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);

  return $isCartOpen ? (
    <aside>
      {Object.values($cartItems).length ? (
        <ul>
          {Object.values($cartItems).map(cartItem => (
            <li>
              <img src={cartItem.imageSrc} alt={cartItem.name} />
              <h3>{cartItem.name}</h3>
              <p>Quantity: {cartItem.quantity}</p>
            </li>
          ))}
        </ul>
      ) : <p>Your cart is empty!</p>}
    </aside>
  ) : null;
}

import { useStore } from '@nanostores/react';
import { isCartOpen, cartItems } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);

  return $isCartOpen ? (
    <aside>
      {Object.values($cartItems).length ? (
        <ul>
          {Object.values($cartItems).map(cartItem => (
            <li>
              <img src={cartItem.imageSrc} alt={cartItem.name} />
              <h3>{cartItem.name}</h3>
              <p>Quantity: {cartItem.quantity}</p>
            </li>
          ))}
        </ul>
      ) : <p>Your cart is empty!</p>}
    </aside>
  ) : null;
}

import { useStore } from '@nanostores/solid';
import { isCartOpen, cartItems } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);

  return $isCartOpen() ? (
    <aside>
      {Object.values($cartItems()).length ? (
        <ul>
          {Object.values($cartItems()).map(cartItem => (
            <li>
              <img src={cartItem.imageSrc} alt={cartItem.name} />
              <h3>{cartItem.name}</h3>
              <p>Quantity: {cartItem.quantity}</p>
            </li>
          ))}
        </ul>
      ) : <p>Your cart is empty!</p>}
    </aside>
  ) : null;
}

<script>
  import { isCartOpen, cartItems } from '../cartStore';
</script>

{#if $isCartOpen}
  {#if Object.values($cartItems).length}
    <aside>
      {#each Object.values($cartItems) as cartItem}
      <li>
        <img src={cartItem.imageSrc} alt={cartItem.name} />
        <h3>{cartItem.name}</h3>
        <p>Quantity: {cartItem.quantity}</p>
      </li>
      {/each}
    </aside>
  {#else}
    <p>Votre panier est vide !</p>
  {/if}
{/if}

<template>
  <aside v-if="$isCartOpen">
    <ul v-if="Object.values($cartItems).length">
      <li v-for="cartItem in Object.values($cartItems)" v-bind:key="cartItem.name">
        <img :src=cartItem.imageSrc :alt=cartItem.name />
        <h3>{{cartItem.name}}</h3>
        <p>Quantité : {{cartItem.quantity}}</p>
      </li>
    </ul>
    <p v-else>Votre panier est vide !</p>
  </aside>
</template>

<script setup>
  import { cartItems, isCartOpen } from '../cartStore';
  import { useStore } from '@nanostores/vue';

  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);
</script>

import { LitElement, html } from 'lit';
import { isCartOpen, cartItems } from '../cartStore';
import { StoreController } from '@nanostores/lit';

export class CartFlyoutLit extends LitElement {
  private cartOpen = new StoreController(this, isCartOpen);
  private getCartItems = new StoreController(this, cartItems);

  renderCartItem(cartItem) {
    return html`
      <li>
        <img src="${cartItem.imageSrc}" alt="${cartItem.name}" />
        <h3>${cartItem.name}</h3>
        <p>Quantité : ${cartItem.quantity}</p>
      </li>
    `;
  }

  render() {
    return this.cartOpen.value
      ? html`
          <aside>
            ${
              Object.values(this.getCartItems.value).length
                ? html`
                  <ul>
                    ${Object.values(this.getCartItems.value).map((cartItem) =>
                      this.renderCartItem(cartItem)
                    )}
                  </ul>
                `
                : html`<p>Votre panier est vide !</p>`
            }
          </aside>
        `
      : null;
  }
}

customElements.define('cart-flyout', CartFlyoutLit);

Maintenant, vous devriez avoir un exemple de e-commerce entièrement interactif avec le plus petit bundle de JS de la galaxie 🚀

Essayez l’exemple complété sur votre machine ou en ligne via Stackblitz !

Plus de méthodes

Partage d'État

Apprenez à partager l'état entre les composants du framework avec les Nano Stores.
Ajouter un flux RSS

Ajoutez un flux RSS à votre site Astro pour permettre aux utilisateurs de s'abonner à votre contenu.
Installation d'un plugin Vite ou Rollup

Découvrez comment vous pouvez importer des données YAML en ajoutant un plugin Rollup à votre projet.
Créer un composant image personnalisé

Apprendre à construire un composant image personnalisé qui supporte les requêtes média en utilisant la fonction getImage.
Construire des formulaires avec des routes API

Apprendre à utiliser JavaScript pour envoyer les soumissions de formulaires à une route API.
Créer des formulaires HTML dans Astro Pages

Apprenez à construire des formulaires HTML et à gérer les soumissions dans votre frontmatter.
Use Bun with Astro

Learn how to use Bun with your Astro site.
Call endpoints from the server

Learn how to call endpoints from the server in Astro.
Vérifier un Captcha

Apprenez à créer une route API et à la récupérer auprès du client.
Construisez votre site Astro avec Docker

Apprendre à construire votre site Astro en utilisant Docker.
Dynamically Import Images

Learn how to dynamically import images using Vite's import.meta.glob function
Ajouter des icônes aux liens externes

Apprendre à installer un plugin rehype pour ajouter des icônes aux liens externes dans vos fichiers Markdown.
Add i18n features

Use dynamic routing and content collections to add internationalization support to your Astro site.
Ajouter l'heure de la dernière modification

Construire un plugin Remark pour ajouter l'heure de la dernière modification à votre Markdown et MDX.
Ajout du temps de lecture

Construire un plugin remark pour ajouter le temps de lecture à vos fichiers Markdown ou MDX.
Partage d'état entre composants Astro

Apprendre à partager des états entre composants Astro avec Nano Stores.
Utilisation de la diffusion en continu pour améliorer les performances des pages

Apprendre à utiliser la diffusion en continu pour améliorer les performances des pages.
Styliser le rendu Markdown avec la typographie Tailwind

Apprenez à utiliser @tailwind/typography pour styliser votre rendu Markdown.

Comment pouvons-nous vous aider ?

Comment pouvons-nous vous aider ?

Partage d'État

Pourquoi Nano Stores ?

Installer Nano Stores

Exemple d’utilisation - Menu déroulant pour un panier de e-commerce

Utilisation des “atoms”

Utilisation des “maps”

Plus de méthodes

Partage d'État

Ajouter un flux RSS

Installation d'un plugin Vite ou Rollup

Créer un composant image personnalisé

Construire des formulaires avec des routes API

Créer des formulaires HTML dans Astro Pages

Use Bun with Astro

Call endpoints from the server

Vérifier un Captcha

Construisez votre site Astro avec Docker

Dynamically Import Images

Ajouter des icônes aux liens externes

Add i18n features

Ajouter l'heure de la dernière modification

Ajout du temps de lecture

Partage d'état entre composants Astro

Utilisation de la diffusion en continu pour améliorer les performances des pages

Styliser le rendu Markdown avec la typographie Tailwind