Как делить состояние между компонентами в Svelte?
- Что такое store в Svelte?
Между родителем и ребёнком — props и колбэки (или bind). Для общего состояния нескольких компонентов в Svelte 5 выносят $state в отдельный модуль (.svelte.js) и импортируют его — реактивность работает и вне компонентов. Классический способ — stores: writable, readable, derived с подпиской; в компоненте значение читается через префикс $store с автоматической отпиской. Для данных глубоко по дереву — context (setContext/getContext); в SvelteKit серверное состояние, общее между пользователями, держать в модулях опасно.
- Store — объект с методом subscribe, легко писать свой
- $store в шаблоне сам отписывается при уничтожении компонента
- Данные страниц в SvelteKit — через функции load
Подробно
// cart.svelte.js
export const cart = $state({ items: [] });
// в компоненте
import { cart } from './cart.svelte.js';
cart.items.push(item);Что хотят услышать
- props для родителя и ребёнка.
- Общий $state в модуле или stores.
- context и особенности SSR.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗В Svelte нельзя разделять состояние между компонентами
- ✗Подписку на $store нужно всегда закрывать вручную в onDestroy
- ✓$state в отдельном модуле или stores с чтением через $store; props — родитель → ребёнок
- ✗Глобальное состояние в модуле SvelteKit безопасно делить между пользователями на сервере
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.