javascript / intermediate
Snippet
Dependency Injection mit der Context API
Die Context API bietet eine Möglichkeit, Daten über den Komponentenbaum hinweg zu teilen, ohne 'Prop Drilling' betreiben zu müssen. Im Gegensatz zu global zugänglichen Stores ist der Kontext auf die Komponente, in der er gesetzt wurde, und deren Nachfahren beschränkt. Dies macht ihn ideal für das Theme- oder User-Session-Management innerhalb spezifischer UI-Zweige.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>import { setContext } from 'svelte';import { writable } from 'svelte/store';// Define a store to be sharedlet user = writable({ name: 'Markus', role: 'editor' });// Make the store available to all childrensetContext('userProfile', user);</script>
svelte
Erklärung
1
import { setContext } from 'svelte';
Importiert die Funktion, mit der ein Schlüssel mit einem Wert im aktuellen Komponententext verknüpft wird.
2
setContext('userProfile', user);
Bindet den String-Schlüssel 'userProfile' an den 'user'-Store, damit alle Kind-Komponenten über getContext darauf zugreifen können.