Share state between Astro components

Ta treść nie jest jeszcze dostępna w Twoim języku.

When building an Astro website, you may need to share state across components. Astro recommends the use of Nano Stores for shared client storage.

Recipe

Install Nano Stores:
- npm
- pnpm
- Yarn
Terminal window
npm install nanostores
Terminal window
pnpm add nanostores
Terminal window
yarn add nanostores
Create a store. In this example, the store tracks whether a dialog is open or not:
src/store.js
```
import { atom } from 'nanostores';

export const isOpen = atom(false);
```

Import and use the store in a <script> tag in the components that will share state.

The following Button and Dialog components each use the shared isOpen state to control whether a particular <div> is hidden or displayed:

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

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

  // Set the store to true when the button is clicked
  function openDialog() {
    isOpen.set(true);
  }

  // Add an event listener to the button
  document.getElementById("openDialog")?.addEventListener("click", openDialog);
</script>

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

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

  const dialog = document.getElementById("dialog");
  // Listen to changes in the store, and show/hide the dialog accordingly
  isOpen.subscribe((open) => {
    if (dialog) {
      if (open) {
        dialog.style.display = "block";
      } else {
        dialog.style.display = "none";
      }
    }
  });
</script>

Resources

Pomóż nam Społeczność Zostań sponsorem