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

При использовании архитектуры островков в Astro часто возникает задача: как передать данные из одного островка в другой?

Поскольку каждый островок (например, React-компонент и Svelte-компонент) работает изолированно, вы не можете использовать стандартные «провайдеры контекста» вашего фреймворка для связи между ними.

Astro рекомендует использовать Nano Stores — легкое и не зависящее от фреймворка решение для хранения состояния на клиенте.

Почему Nano Stores?

• Минимальный размер: Библиотека занимает менее 1 КБ и не имеет зависимостей.
• Универсальность: Работает с React, Svelte, Vue, Solid и нативным JS. Это позволяет бесшовно передавать данные между компонентами разных фреймворков.

Установка

Установите саму библиотеку и пакет-хелпер для вашего фреймворка:

React

npm install nanostores @nanostores/react

Svelte

npm install nanostores

(В Svelte Nano Stores работают как стандартные хранилища через $)

Vue

npm install nanostores @nanostores/vue

Пример: Корзина интернет-магазина

Предположим, у нас есть кнопка «Добавить в корзину» (написанная на одном фреймворке) и счетчик товаров в шапке (написанный на другом).

1. Создайте файл хранилища:

   src/cartStore.js

   import { atom } from 'nanostores';
   
   export const cartItems = atom([]);
   
   export function addToCart(item) {
     cartItems.set([...cartItems.get(), item]);
   }

2. Используйте хранилище в компоненте React:

   import { useStore } from '@nanostores/react';
   import { cartItems, addToCart } from '../cartStore';
   
   export function AddButton({ item }) {
     return <button onClick={() => addToCart(item)}>Добавить</button>;
   }

3. Получите данные в компоненте Svelte:

   <script>
     import { cartItems } from '../cartStore';
   </script>
   
   <div>Товаров в корзине: {$cartItems.length}</div>

Теперь при нажатии кнопки в React-компоненте данные в Svelte-компоненте обновятся мгновенно! 🚀