Przejdź do głównej zawartości

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.

  1. Install Nano Stores:

    Terminal window
    npm install nanostores
  2. 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);
  3. 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:

    src/components/Button.astro
    <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>
    src/components/Dialog.astro
    <div id="dialog" style="display: none">Hello world!</div>
    <script>
    import { isOpen } from '../store.js';
    // Listen to changes in the store, and show/hide the dialog accordingly
    isOpen.subscribe(open => {
    if (open) {
    document.getElementById('dialog').style.display = 'block';
    } else {
    document.getElementById('dialog').style.display = 'none';
    }
    })
    </script>
Pomóż nam

Jak chcesz ją przekazać?

Otwórz Issue na GitHubie

Najszybszy sposób na powiadomienie nas o problemie.

Społeczność