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)`...

```svelte
<!--- file: Parent.svelte --->
<script>
	import { setContext } from 'svelte';

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

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

```svelte
<!--- file: Child.svelte --->
<script>
	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](snippet) `children`
([demo](/playground/untitled#H4sIAAAAAAAAE42Q3W6DMAyFX8WyJgESK-oto6hTX2D3YxcM3IIUQpR40yqUd58CrCXsp7tL7HNsf2dAWXaEKR56yfTBGOOxFWQwfR6Qz8q1XAHjL-GjUhvzToJd7bU09FO9ctMkG0wxM5VuFeeFLLjtVK8ZnkpNkuGo-w6CTTJ9Z3PwsBAemlbUF934W8iy5DpaZtOUcU02-ZLcaS51jHEkTFm_kY1_wfOO8QnXrb8hBzDEc6pgZ4gFoyz4KgiD7nxfTe8ghqAhIfrJ46cTzVZBbkPlODVJsLCDO6V7ZcJoncyw1yRr0hd1GNn_ZbEM3I9i1bmVxOlWElUvDUNHxpQngt3C4CXzjS1rtvkw22wMrTRtTbC8Lkuabe7jvthPPe3DofYCAAA=)):

```svelte
<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`](svelte#setContext) et [`getContext`](svelte#getContext), Svelte expose les
fonctions [`hasContext`](svelte#hasContext) et [`getAllContexts`](svelte#getAllContexts).

## Utiliser le contexte avec l'état [!VO]Using context with state

Vous pouvez stocker des états réactifs dans le contexte
([demo](/playground/untitled#H4sIAAAAAAAAE41R0W6DMAz8FSuaBNUQdK8MkKZ-wh7HHihzu6hgosRMm1D-fUpSVNq12x4iEvvOx_kmQU2PIhfP3DCCJGgHYvxkkYid7NCI_GUS_KUcxhVEMjOelErNB3bsatvG4LW6n0ZsRC4K02qpuKqpZtmrQTNMYJA3QRAs7PTQQxS40eMCt3mX3duxnWb-lS5h7nTI0A4jMWoo4c44P_Hku-zrOazdy64chWo-ScfRkRgl8wgHKrLTH1OxHZkHgoHaTraHcopXUFYzPPVfuC_hwQaD1GrskdiNCdQwJljJqlvXfyqVsA5CGg0uRUQifHw56xFtciO75QrP07vo_JXf_tf8yK2ezDKY_ZWt_1y2qqYzv7bI1IW1V_sN19m-07wCAAA=))...

```svelte
<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...

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

... vous devez faire ceci :

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

Svelte vous avertira si vous vous trompez.

## Contexte typé [!VO]Type-safe context

Une astuce utile est d'englober les appels à `setContext` et `getContext` dans des fonctions
utilitaires qui vous permettent de préserver votre typage :

```js
/// file: context.js
// @filename: ambient.d.ts
interface User {}

// @filename: index.js
// ---cut---
import { getContext, setContext } from 'svelte';

const key = {};

/** @param {User} user */
export function setUserContext(user) {
	setContext(key, user);
}

export function getUserContext() {
	return /** @type {User} */ (getContext(key));
}
```

## Remplacer l'état global [!VO]Replacing global state

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 :

```js
/// file: state.svelte.js
export const myGlobalState = $state({
	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 !)...

```svelte
<!--- file: App.svelte ---->
<script>
	import { myGlobalState } from 'svelte';

	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.