Состояние: $state

Состояние — данные компонента, которые меняются во время работы: текст в поле, список задач, счётчик. Чтобы Svelte обновлял страницу при их изменении, переменную объявляют руной $state.

Обычная переменная не обновляет страницу

<!-- src/routes/+page.svelte -->
<script>
  let count = 0;
</script>
 
<button onclick={() => count++}>Выполнено: {count}</button>

Атрибут onclick задаёт функцию, которая выполнится при клике (подробнее — в уроке о событиях). Число в переменной растёт, но кнопка всегда показывает «Выполнено: 0»: Svelte не следит за обычными переменными.

Руна $state

<!-- src/routes/+page.svelte -->
<script>
  let count = $state(0);
</script>
 
<button onclick={() => count++}>Выполнено: {count}</button>

Теперь каждый клик увеличивает число на кнопке. $state(0) создаёт реактивную переменную с начальным значением 0. Читают и меняют её как обычную переменную — без .value и без функций-сеттеров.

Массивы и объекты

Состояние может хранить массив объектов — например, список задач. Svelte замечает изменения внутри него: push, присваивание свойства, splice.

<!-- src/routes/+page.svelte -->
<script>
  let todos = $state([
    { id: 1, text: 'Купить хлеб', done: false },
    { id: 2, text: 'Позвонить Олегу', done: false }
  ]);
 
  function addTodo() {
    todos.push({ id: Date.now(), text: 'Новая задача', done: false });
  }
 
  function finishFirst() {
    todos[0].done = true;
  }
</script>
 
<p>Задач: {todos.length}</p>
<p>Первая выполнена: {todos[0].done ? 'да' : 'нет'}</p>
<button onclick={addTodo}>Добавить</button>
<button onclick={finishFirst}>Выполнить первую</button>

Кнопка «Добавить» увеличивает счётчик задач, кнопка «Выполнить первую» меняет «нет» на «да». Такую глубокую реактивность Svelte даёт обычным массивам и объектам, переданным в $state.

Замена целиком

Переменной состояния можно присвоить новое значение — это тоже обновит страницу:

<script>
  let todos = $state([{ id: 1, text: 'Купить хлеб', done: true }]);
 
  function clearDone() {
    todos = todos.filter((todo) => !todo.done);
  }
</script>
 
<p>Задач: {todos.length}</p>
<button onclick={clearDone}>Убрать выполненные</button>

После клика выполненная задача пропадёт, и счётчик покажет «Задач: 0».

Где можно писать $state

Руна работает только при объявлении переменной или поля класса — в компоненте .svelte или в файле .svelte.js (о них — в главе об общем состоянии). В простом файле .js она не сработает: компилятор Svelte такие файлы не обрабатывает.

Частая ошибка

Объявить состояние через const, а затем присвоить новое значение:

<script>
  const todos = $state([]);
 
  function reset() {
    todos = []; // Ошибка: константе нельзя присвоить значение
  }
</script>

Если переменную нужно заменять целиком, объявляйте её через let. const подходит, когда вы только меняете содержимое — вызываете push или присваиваете свойства.