The `svelte/store` module exports functions for creating [readable](/docs/svelte-store#readable), [writable](/docs/svelte-store#writable) and [derived](/docs/svelte-store#derived) stores.
Le module `svelte/store` exporte des fonctions pour créer des <spanclass="vo">[stores](/docs/sveltejs#store)</span> [de lecture (_readable_)](/docs/svelte-store#readable), [d'écriture (_writable_)](/docs/svelte-store#writable) et [dérivés (_derived_)](/docs/svelte-store#derived).
Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
Gardez à l'esprit que vous n'êtes pas _obligé•e_ d'utiliser ces fonctions pour profiter de la [syntaxe réactive `$store`](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) 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](/docs/svelte-store#derived) de Svelte.
This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) to see what a correct implementation looks like.
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](/docs/svelte-components#script-4-pr-fixer-les-stores-avec-$-pour-acc-der-leur-valeur) pour voir à quoi ressemble une implémentation fonctionnelle.
## `writable`
> EXPORT_SNIPPET: svelte/store#writable
Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
Fonction qui crée un <spanclass="vo">[store](/docs/sveltejs#store)</span> 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`is a method that takes one argument which is the value to be set. The store value gets set to the value of the argument if the store value is not already equal to it.
`set`est une méthode qui prend un argument la valeur à définir. La valeur courante du <spanclass="vo">[store](/docs/sveltejs#store)</span> est remplacée par la valeur de l'argument si celle-ci n'est pas déjà égale à la valeur courante.
`update`is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
`update`est une méthode qui prend un <spanclass="vo">[callback](/docs/development#callback)</span> comme seul argument. Le <spanclass="vo">[callback](/docs/development#callback)</span> prend la valeur existante du <spanclass="vo">[store](/docs/sveltejs#store)</span> comme argument et renvoie la nouvelle valeur à définir pour le <spanclass="vo">[store](/docs/sveltejs#store)</span>.
```js
```ts
/// file: store.js
import { writable } from 'svelte/store';
const count = writable(0);
count.subscribe((value) => {
console.log(value);
}); // logs '0'
count.subscribe(valeur => {
console.log(valeur);
}); // affiche '0'.
count.set(1); // logs '1'
count.set(1); // affiche '1'.
count.update((n) => n + 1); // logs '2'
count.update(n => n + 1); // affiche '2'.
```
If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store, and an `update` function which works like the `update` method on the store, taking a callback to calculate the store's new value from its old value. It must return a `stop` function that is called when the subscriber count goes from one to zero.
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 <spanclass="vo">[store](/docs/sveltejs#store)</span>. Elle doit retourner une fonction `stop` qui sera appelée lorsque le nombre d'abonnés passera de un à zéro.
```js
```ts
/// file: store.js
import { writable } from 'svelte/store';
const count = writable(0, () => {
console.log('got a subscriber');
return () => console.log('no more subscribers');
console.log('vous avez un abonné');
return () => console.log("vous n'avez plus d'abonnés");
});
count.set(1); // does nothing
count.set(1); // ne fait rien
const unsubscribe = count.subscribe((value) => {
const unsubscribe = count.subscribe(value => {
console.log(value);
}); // logs 'got a subscriber', then '1'
}); // affiche 'vous avez un abonné', puis '1'.
unsubscribe(); // logs 'no more subscribers'
unsubscribe(); // affiche "vous n'avez plus d'abonnés".
```
Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
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`.
## `readable`
> EXPORT_SNIPPET: svelte/store#readable
Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to`writable`.
Crée un <spanclass="vo">[store](/docs/sveltejs#store)</span> dont la valeur ne peut pas être modifiée de l'extérieur. Le premier argument est la valeur initiale du <spanclass="vo">[store](/docs/sveltejs#store)</span>, le second argument est le même que le second argument de`writable`.
Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
Dérive un <spanclass="vo">[store](/docs/sveltejs#store)</span> à partir d'un ou plusieurs autres <spanclass="vo">[stores](/docs/sveltejs#store)</span>. Le <spanclass="vo">[callback](/docs/development#callback)</span> s'exécute initialement lorsque le premier abonné s'abonne, puis à chaque fois que les dépendances du <spanclass="vo">[store](/docs/sveltejs#store)</span> changent.
In the simplest version, `derived` takes a single store, and the callback returns a derived value.
Dans la version la plus simple, `derived` prend un seul <spanclass="vo">[store](/docs/sveltejs#store)</span>, et le <spanclass="vo">[callback](/docs/development#callback)</span> renvoie une valeur dérivée.
```ts
// @filename: ambient.d.ts
@ -110,11 +110,11 @@ import { derived } from 'svelte/store';
const doubled = derived(a, ($a) => $a * 2);
```
The callback can set a value asynchronously by accepting a second argument, `set`, and an optional third argument, `update`, calling either or both of them when appropriate.
Le <spanclass="vo">[callback](/docs/development#callback)</span> peut définir une valeur de manière asynchrone en acceptant un second argument, `set`, et en l'appelant au moment opportun.
In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be`undefined`.
Dans ce cas, vous pouvez également passer un troisième argument à `derived` - la valeur initiale du <spanclass="vo">[store](/docs/sveltejs#store)</span> dérivé avant le premier appel de `set` ou `update`. Si aucune valeur initiale n'est fournie, la valeur initiale du <spanclass="vo">[store](/docs/sveltejs#store)</span> sera`undefined`.
// every time $a produces a value, this produces two
// values, $a immediately and then $a + 1 a second later
// chaque fois que $a produit une valeur, ceci va produire
// deux valeurs, $a immédiatement, pius $a + 1 une seconde plus tard
});
```
If you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.
Si vous renvoyez une fonction à partir du <spanclass="vo">[callback](/docs/development#callback)</span>, elle sera appelée lorsque a) le <spanclass="vo">[callback](/docs/development#callback)</span> s'exécute à nouveau, ou b) le dernier abonné se désabonne.
```js
```ts
// @filename: ambient.d.ts
import { type Writable } from 'svelte/store';
@ -172,7 +172,7 @@ const tick = derived(
);
```
In both cases, an array of arguments can be passed as the first argument instead of a single store.
Dans les deux cas, un tableau d'arguments peut être passé comme premier argument au lieu d'un seul <spanclass="vo">[store](/docs/sveltejs#store)</span>.
This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
Cette fonction utilitaire crée un <spanclass="vo">[store](/docs/sveltejs#store)</span> en lecture seule (<spanclass="vo">[readonly](/docs/development#readonly)</span>) à partir d'un autre <spanclass="vo">[store](/docs/sveltejs#store)</span>. Vous pouvez toujours vous abonner aux changements du <spanclass="vo">[store](/docs/sveltejs#store)</span> original en utilisant le <spanclass="vo">[store](/docs/sveltejs#store)</span>`readonly`.
```js
```ts
import { readonly, writable } from 'svelte/store';
Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
De manière générale, il est recommandé de lire la valeur d'un <spanclass="vo">[store](/docs/sveltejs#store)</span> 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 <spanclass="vo">[store](/docs/sveltejs#store)</span> auquel vous n'êtes pas abonné. `get` vous permet de le faire.
> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
> 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.
@ -12,7 +12,7 @@ Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est q
> Bientôt...
## Hooks
## Hook
> Bientôt...
@ -26,8 +26,6 @@ Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est q
## Store
> Bientôt...
Un _store_ est un concept au sein de Svelte qui permet de stocker une valeur, et de notifier n'importe quel module au sein de l'application de ses changements de valeur.
Plus d'infos sur [les stores Svelte dans la documentation](/docs/svelte-store).
Romain l'Ourson
3 years ago
committed by
Romain Crestey