Skip to content

Store

import: @azure-net/kit/edges

Сторы как и презентеры являются частью edges-svelte и в ssr проекте вы обязаны настроить edges-svelte с помощью edgesHandle (смотри раздел Настройка проекта, либо документацию по edges-svelte). Все что находится в createStore также ssr-friendly так как он полностью повторяет логику createPresenter и отличается лишь тем что предоставляет доступ к работе с состояниями.

createStore

Создает базовый стор, предоставляя вам доступ к createState, createDerivedState, createRawState, о них ниже.

createStoreFactory

Является фабрикой для создания сторов. Повторяет суть createPresenterFactory, а значит нужен для создания сторов с вашими зависимостями.

Примитивы состояний

  • createState является прямым аналогом svelte writable, но полностью ssr-safe.
  • createDerivedState является прямым аналогом derived (не $dervied, а именно derived)
  • createRawState под капотом является $state. Это легковесная реактивная переменная не требующая подписки, но с доступом через .value

Примеры

typescript
import { createStore } from '@azure-net/kit/edges';
// Первым аргументом мы также обязаны передать уникальное имя
const MyStore = createStore('MyStore', ({ createState, createDerivedState, createRawState }) => {
    // Аналог writable
	const collection = createState<number[]>([]);
	// Аналог derived
	const collectionLengthDoubled = createDerivedState([collection], ([$c]) => $c.length * 2);
    // Анлог $state
    const justSomeState = createRawState<number>(0);

	const updateAction = (num: number) => {
		collection.update((n) => [...n, num]);
        justSomeState.value = num;
	};

	return { collection, collectionLengthDoubled, justSomeState, updateAction };
});
html
<script lang="ts">
    import { MyStore } from '${ContextName}/delivery/{FeatureName}';

    const { collection, collectionLengthDoubled, updateAction } = MyStore();
</script>

{$collection.join(', ')}
{$collectionLengthDoubled} <!-- 0 до клика по кнопке ниже, 2 после -->
<button onclick={() => updateAction(25)}>count update</button> <!-- Клик обновит состояние, добавив новый элемент в массив и изменив justSomeState -->