Skip to main content
SvelteRuntime

Contexte

Le contexte permet aux composants d’accéder aux valeurs appartenant aux composants parents sans les fournir en tant que props (potentiellement au travers de plusieurs couches de composants intermédiaires, ce qui s’appelle faire du “prop-drilling”). Le composant parent définit un contexte avec setContext(key, value)...

Parent
<script>
	import { setContext } from 'svelte';

	setContext('my-context', 'bonjour depuis Parent.svelte');
</script>
<script lang="ts">
	import { setContext } from 'svelte';

	setContext('my-context', 'bonjour depuis Parent.svelte');
</script>

... et l’enfant le récupère avec getContext :

Child
<script>
	import { getContext } from 'svelte';

	const message = getContext('my-context');
</script>

<h1>{message}, au sein de Child.svelte</h1>
<script lang="ts">
	import { getContext } from 'svelte';

	const message = getContext('my-context');
</script>

<h1>{message}, au sein de Child.svelte</h1>

C’est particulièrement utile lorsque Parent.svelte n’a pas directement conscience de Child.svelte, mais en fait le rendu via le snippet children (demo):

<Parent>
	<Child />
</Parent>

La clé ('my-context', dans l’exemple ci-dessus) et le contexte lui-même peuvent être n’importe quelle valeur JavaScript.

En plus de setContext et getContext, Svelte expose les fonctions hasContext et getAllContexts.

Utiliser le contexte avec l’état

Vous pouvez stocker des états réactifs dans le contexte (demo)...

<script>
	import { setContext } from 'svelte';
	import Child from './Child.svelte';

	let counter = $state({
		count: 0
	});

	setContext('counter', counter);
</script>

<button onclick={() => counter.count += 1}>
	incrémenter
</button>

<Child />
<Child />
<Child />

... même s’il toutefois noter que si vous réassignez counter plutôt que de le mettre à jour, vous “casserez le lien” — en d’autres termes, plutôt que ceci...

<button onclick={() => counter = { count: 0 }}>
	réinitialiser
</button>

... vous devez faire ceci :

<button onclick={() => counter.count = 0}>
	réinitialiser
</button>

Svelte vous avertira si vous vous trompez.

Contexte typé

Au lieu d’utiliser setContext et getContext directement, vous pouvez les utiliser via createContext, qui vous fournit un contexte typé et permet de ne pas avoir à fournir de clé :

context
import { function createContext<T>(): [() => T, (context: T) => T]
Returns a [get, set] pair of functions for working with context in a type-safe way.


createContext } from 'svelte';

export const [const getUserContext: () => UsergetUserContext, const setUserContext: (context: User) => UsersetUserContext] = createContext<User>(): [() => User, (context: User) => User]
Returns a [get, set] pair of functions for working with context in a type-safe way.


createContext<User>();

Remplacer l’état global

Lorsque vous avez un état partagé par plusieurs composants différents, vous pourriez être tenté•e•s de le mettre dans son propre module et de simplement l’importer là où il est nécessaire :

state.svelte
export const 
const myGlobalState: {
    user: {};
}
myGlobalState = 
function $state<{
    user: {};
}>(initial: {
    user: {};
}): {
    user: {};
} (+1 overload)
namespace $state
Declares reactive state.


Example:


let count = $state(0);
https://svelte.dev/docs/svelte/$state


@paraminitial The initial value
$state({
	user: {}user: {
		// ...
	}
	// ...
});

Dans plusieurs situations ceci ne posera pas de problèmes, mais il y a un risque : si vous mutez l’état lors d’un rendu côté serveur (ce qui est découragé, mais tout à fait possible !)...

App
<script>
	import { myGlobalState } from './state.svelte.js';

	let { data } = $props();

	if (data.user) {
		myGlobalState.user = data.user;
	}
</script>
<script lang="ts">
	import { myGlobalState } from './state.svelte.js';

	let { data } = $props();

	if (data.user) {
		myGlobalState.user = data.user;
	}
</script>

... alors les données pourraient être accessibles par la prochaine personne utilisant votre site. Le contexte résout ce problème car il n’est pas partagé entre les requêtes.

Modifier cette page sur Github llms.txt

précédent suivant
Stores