Svelte произвел фурор в экосистеме JavaScript благодаря своему уникальному подходу к созданию пользовательских интерфейсов. Svelte Store — это простая, но мощная система управления состоянием, встроенная в приложения Svelte. В этом сообщении блога мы рассмотрим, что такое Svelte Store, как он работает, и рассмотрим пример его использования.

Что такое Svelte Store?

Svelte Store — это решение для управления реактивным состоянием, встроенное непосредственно в Svelte. Это позволяет нам создавать глобально доступные и реактивные переменные, которые мы можем использовать в наших компонентах Svelte.

Как это работает?

Svelte Store работает, создавая «магазин» — по сути, объект JavaScript — который хранит состояние. Это хранилище можно импортировать в любой компонент Svelte, позволяя компоненту считывать состояние и реагировать на изменения.

Вот простой пример:

import { writable } from 'svelte/store';

// create a writable store with initial value 0
const count = writable(0);

Теперь, когда мы создали наш магазин, мы можем использовать его в наших компонентах Svelte следующим образом:

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

<p>{$count}</p>

Практический пример

Давайте создадим простое приложение-счетчик, используя Svelte Store, чтобы продемонстрировать его использование в реальном сценарии.

  1. Настройка магазина

Начнем с настройки нашего магазина. Мы будем использовать функцию writable, которая является одним из контрактов хранилища, предоставляемых Svelte. Он создает хранилище, которое позволяет как обновлять, так и подписываться:

// store.js 
import { writable } from 'svelte/store'; 
// Our simple counter store 
export const counter = writable(0);

2.Создание компонента

Далее мы создадим компонент Svelte, использующий это хранилище. Мы создадим счетчик с кнопками «увеличение» и «уменьшение»:

<!-- Counter.svelte --> 
<script>  
import { counter } from './store.js';    

// Functions to increment and decrement the counter   
const increment = () => counter.update(n => n + 1);   
const decrement = () => counter.update(n => n - 1); 

</script>  

<button on:click={decrement}>-</button> 
<p>{$counter}</p> 
<button on:click={increment}>+</button>

Вы можете сослаться на значение магазина, добавив к имени магазина префикс $. Это синтаксис Svelte для подписки на магазин. Всякий раз, когда значение counter изменяется, наш компонент будет автоматически обновляться, чтобы отразить новое значение.

Вот и все! С помощью всего нескольких строк кода мы создали простое приложение-счетчик с помощью Svelte Store.

Заключение

Svelte Store — неотъемлемая часть платформы Svelte, предлагающая простой и эффективный способ управления состоянием. Используя Svelte Store, мы можем легко и просто создавать интерактивные компоненты с отслеживанием состояния. Это свидетельство мощности и элегантности Svelte и еще одна причина, по которой Svelte становится популярным выбором для современной веб-разработки.

Это все для этого блога. Я надеюсь, что вы нашли это руководство полезным для понимания и использования Svelte Store. Удачного кодирования!