Как использовать стор в Svelte?

@caterina 

Svelte предоставляет встроенную функциональность для использования стора (store) - это глобальное хранилище состояний, которое может быть использовано в разных компонентах вашего приложения.

Создание стора в Svelte осуществляется с помощью функции writable из библиотеки svelte/store. Например, чтобы создать стор для хранения текущей даты и времени, можно сделать следующее:

1
2
3
4
5
6
7
8
9

<!-- App.svelte -->
<script>
  import { writable } from 'svelte/store';

  const currentDate = writable(new Date());
  setInterval(() => currentDate.set(new Date()), 1000);
</script>

<h1>The current date and time is {$currentDate}</h1>

Здесь мы создали стор currentDate с помощью функции writable, и установили начальное значение - текущую дату и время. Затем мы запускаем интервал, который каждую секунду обновляет значение стора.

Внутри компонента мы можем получить значение стора, используя директиву { $<имя стора> }. В этом случае мы отображаем текущую дату и время в заголовке страницы.

Если мы захотим использовать стор currentDate в других компонентах, мы можем просто импортировать его и использовать так же, как в примере выше.

1
2
3
4
5
6

<!-- AnotherComponent.svelte -->
<script>
  import { currentDate } from './App.svelte';
</script>

<p>The current date and time is {$currentDate}</p>

Здесь мы импортируем стор currentDate из компонента App.svelte и отображаем его значение в параграфе. Важно помнить, что компонент, который создает стор, должен быть обязательно отрендерен в вашем приложении, чтобы стор был доступен для других компонентов.