svelte/store

Le module svelte/store exporte des fonctions pour créer des stores de lecture (readable), d'écriture (writable) et dérivés (derived).

Gardez à l'esprit que vous n'êtes pas obligé•e d'utiliser ces fonctions pour profiter de la syntaxe réactive $store dans vos composants. Tout objet qui implémente correctement .subscribe, unsubscribe, et (éventuellement) .set est un store valide, et fonctionnera à la fois avec la syntaxe spéciale, et avec les stores dérivés de Svelte.

Cela permet d'envelopper presque toute autre bibliothèque de gestion d'état réactif pour l'utiliser dans Svelte. Renseignez-vous sur le contrat de store pour voir à quoi ressemble une implémentation fonctionnelle.

writablepermalink

ts
function writable<T>(
	value?: T | undefined,
	start?: StartStopNotifier<T> | undefined
): Writable<T>;

Fonction qui crée un store dont les valeurs peuvent être définies à partir de composants "extérieurs". Il est créé comme un objet avec les méthodes supplémentaires set et update.

set est une méthode qui prend un argument la valeur à définir. La valeur courante du store est remplacée par la valeur de l'argument si celle-ci n'est pas déjà égale à la valeur courante.

update est une méthode qui prend un callback comme seul argument. Le callback prend la valeur existante du store comme argument et renvoie la nouvelle valeur à définir pour le store.

ts
import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe(valeur => {
	console.log(valeur);
}); // affiche '0'.

count.set(1); // affiche '1'.

count.update(n => n + 1); // affiche '2'.

Si une fonction est passée comme deuxième argument, elle sera appelée lorsque le nombre d'abonnés au store passera de zéro à un (mais pas de un à deux, etc.). Cette fonction a comme argument une fonction set qui peut changer la valeur du store. Elle doit retourner une fonction stop qui sera appelée lorsque le nombre d'abonnés passera de un à zéro.

ts
import { writable } from 'svelte/store';

const count = writable(0, () => {
	console.log('vous avez un abonné');
	return () => console.log("vous n'avez plus d'abonnés");
});

count.set(1); // ne fait rien

const unsubscribe = count.subscribe(value => {
	console.log(value);
}); // affiche 'vous avez un abonné', puis '1'.

unsubscribe(); // affiche "vous n'avez plus d'abonnés".

Notez que la valeur d'un writable est perdue lorsqu'il est détruit, par exemple lorsque la page est rafraîchie. Cependant, vous pouvez écrire votre propre logique pour synchroniser la valeur, par exemple dans le localStorage.

readablepermalink

ts
function readable<T>(
	value?: T | undefined,
	start?: StartStopNotifier<T> | undefined
): Readable<T>;

Crée un store dont la valeur ne peut pas être modifiée de l'extérieur. Le premier argument est la valeur initiale du store, le second argument est le même que le second argument de writable.

ts
import { readable } from 'svelte/store';

const time = readable(new Date(), (set) => {
	set(new Date());

	const interval = setInterval(() => {
		set(new Date());
	}, 1000);

	return () => clearInterval(interval);
});

const ticktock = readable('tick', (set, update) => {
	const interval = setInterval(() => {
		update((sound) => (sound === 'tick' ? 'tock' : 'tick'));
	}, 1000);

	return () => clearInterval(interval);
});

derivedpermalink

ts
function derived<S extends Stores, T>(
	stores: S,
	fn: (
		values: StoresValues<S>,
		set: (value: T) => void,
		update: (fn: Updater<T>) => void
	) => Unsubscriber | void,
	initial_value?: T | undefined
): Readable<T>;

ts
function derived<S extends Stores, T>(
	stores: S,
	fn: (values: StoresValues<S>) => T,
	initial_value?: T | undefined
): Readable<T>;

Dérive un store à partir d'un ou plusieurs autres stores. Le callback s'exécute initialement lorsque le premier abonné s'abonne, puis à chaque fois que les dépendances du store changent.

Dans la version la plus simple, derived prend un seul store, et le callback renvoie une valeur dérivée.

ts
import { derived } from 'svelte/store';

const doubled = derived(a, ($a) => $a * 2);

Le callback peut définir une valeur de manière asynchrone en acceptant un second argument, set, et en l'appelant au moment opportun.

Dans ce cas, vous pouvez également passer un troisième argument à derived - la valeur initiale du store dérivé avant le premier appel de set ou update. Si aucune valeur initiale n'est fournie, la valeur initiale du store sera undefined.

ts
import { derived } from 'svelte/store';

const delayed = derived(
	a,
	($a, set) => {
		setTimeout(() => set($a), 1000);
	},
	2000
);

const delayedIncrement = derived(a, ($a, set, update) => {
	set($a);
	setTimeout(() => update((x) => x + 1), 1000);
	// chaque fois que $a produit une valeur, ceci va produire
	// deux valeurs, $a immédiatement, pius $a + 1 une seconde plus tard
});

Si vous renvoyez une fonction à partir du callback, elle sera appelée lorsque a) le callback s'exécute à nouveau, ou b) le dernier abonné se désabonne.

ts
import { derived } from 'svelte/store';

const tick = derived(
	frequency,
	($frequency, set) => {
		const interval = setInterval(() => {
			set(Date.now());
		}, 1000 / $frequency);

		return () => {
			clearInterval(interval);
		};
	},
	2000
);

Dans les deux cas, un tableau d'arguments peut être passé comme premier argument au lieu d'un seul store.

ts
import { derived } from 'svelte/store';

const summed = derived([a, b], ([$a, $b]) => $a + $b);

const delayed = derived([a, b], ([$a, $b], set) => {
	setTimeout(() => set($a + $b), 1000);
});

readonlypermalink

ts
function readonly<T>(store: Readable<T>): Readable<T>;

Cette fonction utilitaire crée un store en lecture seule (readonly) à partir d'un autre store. Vous pouvez toujours vous abonner aux changements du store original en utilisant le store readonly.

ts
import { readonly, writable } from 'svelte/store';

const writableStore = writable(1);
const readableStore = readonly(writableStore);

Property 'set' does not exist on type 'Readable<number>'.2339Property 'set' does not exist on type 'Readable<number>'.
readableStore.subscribe(console.log);

writableStore.set(2); // console: 2
readableStore.set(2); // ERROR

getpermalink

ts
function get<T>(store: Readable<T>): T;

De manière générale, il est recommandé de lire la valeur d'un store en vous y abonnant et en utilisant la valeur à mesure qu'elle change. Occasionnellement, vous pouvez avoir besoin de récupérer la valeur d'un store auquel vous n'êtes pas abonné. get vous permet de le faire.

Cela fonctionne en créant un abonnement, en lisant la valeur, puis en se désabonnant. Cette méthode n'est donc pas recommandée lorsque le code concerné est exécuté à haute fréquence.

ts
import { get } from 'svelte/store';

const value = get(store);

Typespermalink

Readablepermalink

Interface Readable pour s'abonner.

ts
interface Readable<T> {…}

ts
subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;

StartStopNotifierpermalink

Lance et arrête les callbacks d'abonnement. Cette fonction est appelée quand le premier abonné s'abonne.

ts
type StartStopNotifier<T> = (
	set: (value: T) => void,
	update: (fn: Updater<T>) => void
) => void | (() => void);

Subscriberpermalink

Callback pour informer des changements d'une valeur.

ts
type Subscriber<T> = (value: T) => void;

Unsubscriberpermalink

Permet de se désabonner des changements d'une valeur

ts
type Unsubscriber = () => void;

Updaterpermalink

Callback pour mettre à jour une valeur.

ts
type Updater<T> = (value: T) => T;

Writablepermalink

Interface Writable for s'abonner et mettre à jour.

ts
interface Writable<T> extends Readable<T> {…}

ts
set(this: void, value: T): void;

ts
update(this: void, updater: Updater<T>): void;