javascript / intermediate
Snippet
Kollisionsfreie Dependency-Injection-Schlüssel mit JavaScript-Symbols in Vue
Die Verwendung von JavaScript-Symbol-Primitiven als Injection-Tokens garantiert kollisionsfreie Provide/Inject-Abhängigkeiten über große Vue-Komponentenstrukturen hinweg.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { provide, inject } from 'vue';export const AUTH_CONTEXT_KEY = Symbol('AuthContext');export function provideAuth(authService) {provide(AUTH_CONTEXT_KEY, authService);}export function useAuth() {const auth = inject(AUTH_CONTEXT_KEY);if (!auth) {throw new Error('useAuth must be called within an AuthProvider scope');}return auth;}
vue
Erklärung
1
export const AUTH_CONTEXT_KEY = Symbol('AuthContext');
Erzeugt ein eindeutiges, unveränderliches Symbol als Injection-Schlüssel.
2
provide(AUTH_CONTEXT_KEY, authService);
Registriert den Dienst unter dem eindeutigen Symbol-Schlüssel.
3
const auth = inject(AUTH_CONTEXT_KEY);
Liest den gebundenen Wert anhand des spezifischen Symbol-Bezeichners aus.
4
if (!auth) throw new Error(...);
Prüft zur Laufzeit, ob die benötigte Abhängigkeit im Komponentenbaum vorhanden ist.