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, чтобы продемонстрировать его использование в реальном сценарии.
- Настройка магазина
Начнем с настройки нашего магазина. Мы будем использовать функцию 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. Удачного кодирования!