Composables

Vue d'ensemble

Cette section documente tous les composables réutilisables de l'application. Les composables sont des fonctions qui encapsulent la logique réutilisable en utilisant la Composition API de Vue.

Liste des composables

1. useAuth
   • Gestion de l'authentification
   • Gestion des tokens JWT
   • Gestion de l'état administrateur
   • Gestion des identifiants de requête
2. useForm
   • Gestion du formulaire multi-étapes
   • Navigation entre les étapes
   • Validation des étapes
   • Persistance des données
3. useParameter
   • Récupération des paramètres système
   • Configuration de l'application
4. useTroubleshootingForm
   • Gestion du formulaire de dépannage multi-étapes
   • Persistance côté client avec sessionStorage
   • Navigation contrôlée et validation avec Zod
   • Stockage de la réponse API

Architecture

flowchart TD
    A[Composables] --> B[useAuth]
    A --> C[useForm]
    A --> D[useParameter]
    A --> E[useTroubleshootingForm]
    B --> F[Tokens JWT]
    B --> G[Cookies]
    C --> H[État formulaire]
    C --> I[Navigation]
    D --> J[API Parameters]
    E --> K[Formulaire dépannage]

Bonnes pratiques

Création de nouveaux composables

1. Structure de fichier

   composables/
   └── useFeatureName.ts
   

2. Conventions de nommage
   • Préfixe use obligatoire
   • Nom en camelCase
   • Nom descriptif de la fonctionnalité
3. Structure d'un composable

export const useFeatureName = () => {
  // État réactif
  const state = useState('featureState', () => initialState);
  
  // Fonctions
  const doSomething = () => {
    // Logique
  };
  
  // Retourner l'API publique
  return {
    state,
    doSomething,
  };
};

Utilisation des composables

<script setup lang="ts">
// Import automatique dans Nuxt
const { getToken, isAuthenticated } = useAuth();
const { currentStep, nextStep } = useForm();

// Utilisation
if (isAuthenticated()) {
  const token = getToken();
  // ...
}
</script>

Patterns communs

1. Gestion d'état avec useState

const data = useState('key', () => initialValue);

2. Persistance avec cookies

const cookie = useCookie('key', {
  secure: true,
  sameSite: 'strict',
  maxAge: 60 * 60 * 24, // 24 heures
});

3. Appels API avec $fetch

const data = await $fetch('/api/endpoint', {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

4. Cache avec useNuxtData

const { data: cached } = useNuxtData('key');
const { data } = await useLazyFetch('/api/endpoint', {
  key: 'key',
});

Tests

Chaque composable doit être testé. Exemple avec Vitest :

import { describe, it, expect } from 'vitest';
import { useFeatureName } from '@/composables/useFeatureName';

describe('useFeatureName', () => {
  it('initialise correctement', () => {
    const { state } = useFeatureName();
    expect(state.value).toEqual(initialState);
  });
});

Dépendances communes

• vue : Framework principal
• @nuxtjs/composition-api : Composition API pour Nuxt
• zod : Validation de schémas (pour certains composables)

Contribution

1. Documentation
   • Documentez toutes les fonctions exposées
   • Incluez des exemples d'utilisation
   • Expliquez les paramètres et valeurs de retour
2. Tests
   • Écrivez des tests unitaires
   • Testez les cas limites
   • Vérifiez la gestion des erreurs
3. Performance
   • Utilisez le cache quand c'est possible
   • Évitez les appels API redondants
   • Optimisez les re-rendus

Ressources

• Documentation Vue Composition API
• Documentation Nuxt Composables
• Guide des meilleures pratiques Vue