Decoupled State via Symbol-based Dependency Injection

Snippet

Decoupled State via Symbol-based Dependency Injection

Using unique Symbols as injection keys ensures that dependency injection is collision-proof and type-safe. This architectural pattern facilitates Inversion of Control (IoC), allowing modules to remain decoupled from specific implementation details.

snippet.js

javascript

import { provide, inject } from 'vue';
 
export const AuthKey = Symbol('AuthContext');
 
export const useAuthProvider = (userData) => {
  provide(AuthKey, userData);
};
 
export const useAuthConsumer = () => {
  const auth = inject(AuthKey);
  if (!auth) throw new Error('useAuthConsumer must be used within an AuthProvider');
  return auth;
};

vue

Breakdown

Symbol('AuthContext')

Creates a unique, non-clashing reference for the injection key.

if (!auth) throw new Error(...)

Ensures the contract of the provider is respected, providing early feedback for architectural violations.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Decoupled State via Symbol-based Dependency Injection

Related