Общее состояние между компонентами Astro

Совет

Используете компоненты фреймворков? Посмотрите, как делиться состоянием между Островками!

При создании сайта на Astro вам может потребоваться передавать данные или состояние между разными компонентами. Astro рекомендует использовать Nano Stores для хранения общего состояния на стороне клиента.

Инструкция

1. Установите Nano Stores:

   npm
   shell npm install nanostores
   pnpm
   shell pnpm add nanostores
   Yarn
   shell yarn add nanostores

2. Создайте хранилище (store). В этом примере мы будем отслеживать, открыто ли диалоговое окно:

   src/store.js

   import { atom } from 'nanostores';
   
   export const isOpen = atom(false);

3. Импортируйте и используйте хранилище в тегах <script> ваших компонентов.

   Компоненты Button и Dialog используют общее состояние isOpen для управления отображением элемента:

   src/components/Button.astro

   <button id="openDialog">Открыть</button>
   
   <script>
     import { isOpen } from '../store.js';
   
     function openDialog() {
       isOpen.set(true);
     }
   
     document.getElementById('openDialog').addEventListener('click', openDialog);
   </script>

   src/components/Dialog.astro

   <div id="dialog" style="display: none">Привет, мир!</div>
   
   <script>
     import { isOpen } from '../store.js';
   
     isOpen.subscribe(open => {
       const dialog = document.getElementById('dialog');
       dialog.style.display = open ? 'block' : 'none';
     })
   </script>