javascript / expert
Snippet
Strikte InjectionKey Symbol-Verträge für hierarchische Zustandskoordinierung
Dieses Beispiel zeigt, wie JavaScript-Symbols und TypeScript-InjectionKey-Schnittstellen Laufzeit- und Kompilierzeit-Typsicherheit über Vue-Dependency-Injection-Bäume hinweg herstellen. Die Verwendung typisierter InjectionKey-Tokens garantiert die Vermeidung von Schlüsselkollisionen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { provide, inject, InjectionKey, ref, Ref } from 'vue';interface UserContext {userId: Ref<string>;permissions: Ref<string[]>;revokeAccess: () => void;}export const USER_CONTEXT_KEY: InjectionKey<UserContext> = Symbol('UserContextKey');export function useProvideUserContext(id: string) { const userId = ref(id);const permissions = ref(['read', 'write']);const revokeAccess = () => { permissions.value = []; };const context: UserContext = { userId, permissions, revokeAccess };provide(USER_CONTEXT_KEY, context);return context;}export function useInjectUserContext(): UserContext {const context = inject(USER_CONTEXT_KEY);if (!context) {throw new Error('UserContext injection attempted outside provider subtree');}return context;};
vue
Erklärung
1
export const USER_CONTEXT_KEY: InjectionKey<UserContext> = Symbol('UserContextKey');
Erstellt ein eindeutiges Symbol-Token, typisiert mit Vues InjectionKey-Schnittstelle, um Laufzeit-Kollisionen zu verhindern.
2
const context: UserContext = { userId, permissions, revokeAccess };
Konstruiert ein typisiertes Vertragsobjekt, das reaktiven Ref-Zustand und Mutatormethoden bündelt.
3
provide(USER_CONTEXT_KEY, context);
Bindet den stark typisierten kontextuellen Zustand unter dem eindeutigen Symbol-Schlüssel an den Komponentenbaum.
4
const context = inject(USER_CONTEXT_KEY);
Ruft bereitgestellte Abhängigkeiten in der Komponentenhierarchie über die Symbol-Kennung ab.
5
if (!context) { throw new Error(...); }
Erzwingt Laufzeitgarantien beim Zugriff auf den Kontext außerhalb gültiger Provider-Teilbäume.