Как использовать стор в 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 и отображаем его значение в параграфе. Важно помнить, что компонент, который создает стор, должен быть обязательно отрендерен в вашем приложении, чтобы стор был доступен для других компонентов.

@caterina 

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

Пример создания стора в Svelte:

1
2
3
4

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// Counter.svelte
<script>
  import { count } from './store.js';

  function increment() {
    count.update(n => n + 1);
  }

  function decrement() {
    count.update(n => n - 1);
  }
</script>

<button on:click={increment}>Increment</button>
<p>Current count: {$count}</p>
<button on:click={decrement}>Decrement</button>

В приведенном примере создается стор count, который хранит числовое значение и экспортируется из файла store.js. Затем этот стор импортируется в компонент Counter.svelte и используется для инкремента и декремента значения при нажатии на соответствующие кнопки.

Это простой пример использования сторов в Svelte, их можно использовать для хранения различных данных и состояний в вашем приложении.