Vous avez entendu parler des composables Vue.js et vous voulez écrire les vôtres ? Peut-être avez-vous déjà utilisé des composables écrits par d’autres, mais vous doutez de la démarche à suivre commencer à en créer un pour vous-même. C’est l’objet de cet article !
Qu’est-ce qu’un composable dans Vue.js
Un composable Vue s’apparente à un utilitaire, avec une différence importante : il contient un état, c’est-à-dire des données définies avec la fonction reactive
ou ref
de Vue.
L’exemple utilisé dans la documentation de Vue.js correspond à une fonction composable useMouse
. On expose les données réactives x
et y
par la fonction composable. Cela signifie qu’à chaque fois que les données sont mises à jour, cela déclenche la mise à jour de l’interface utilisateur (UI) des éléments DOM correspondants. Ici, vous pouvez voir l’effet du composable useMouse
Le point vraiment intéressant des composables réside dans le fait que nous pouvons bénéficier de la définition de données réactives (tout comme dans un composant), mais sans avoir à présenter une UI ! Cela signifie que nous pouvons abstraire la logique en dehors d’un composant et la réutiliser dans le contexte d’une variété de composants différents (ou même sans aucun composant).
Vous pouvez avoir une bonne idée de ce qui est possible en consultant la documentation de VueUse. Il s’agit d’une collection de plus de 200 composables immédiatement utilisables qui résolvent des problématiques courantes telles que le travail avec des données dans localStorage
, le basculement du mode dark, et bien plus encore.
Comment définir un composable avec Vue
Maintenant que vous avez une bonne idée à quoi correspond un composable, voyons étape par étape comment en créer un.
La première étape est de créer un fichier pour votre composable. La convention nous indique qu’il faut le stocker dans un répertoire appelé *composables*
.
Dans ce fichier, vous allez exporter une fonction avec un nom qui décrit ce que fait votre composable. Pour cet article, nous allons créer un composable useMenu
comme exemple.
|
|
Le préfixe use
pour les composables
Notez que le nom du composable commence par use
. C’est aussi une autre convention commune pour aider les utilisateurs de votre composable à le distinguer d’une fonction utilitaire normale et non étatique.
Écrire ses composables en TypeScript
C’est aussi une très bonne idée d’écrire vos composables en utilisant TypeScript. Cela les rend plus intuitifs à utiliser (autocomplétion, détection d’erreurs, etc.). Nous utiliserons TypeScript dans cet article, mais si vous n’êtes pas à l’aise avec TypeScript, vous pouvez toujours écrire vos composables en JS.
Accepter les arguments composables
Tous les composables ne nécessitent pas d’argument, mais la plupart en ont besoin. Pour notre exemple, prenons une liste de mots :
|
|
Les arguments constituent l’interface (ou API) pour l’INPUT ou entrée du composable.
Retourner des données et des fonctions à partir d’un composable
Ensuite, définissons l’API de SORTIE de notre composable, c’est-à-dire ce qui est renvoyé par la fonction.
|
|
Ici, nous exposons 2 choses. Décomposons chacune d’entre elles.
current
ou la donnée d’état
Nous avons ici une donnée réactive.
Par exemple, dans l’utilisation suivante, current
pourrait valoir le premier mot dans la liste :
|
|
Les fonctions next
et prev
La fonction exposée next
permettrait au consommateur du composable de passer à la valeur suivante dans la liste. Ainsi, avec le code suivant, current
devient cher
puis lecteur !
.
|
|
La fonction prev
réalise l’inverse de next
.
Flux de conception des composables
Définir l’interface de notre composable (son API). Rien de tout cela ne fonctionne encore parce que nous devons encore implément la logique métier du composable. Mais ce n’est pas grave. Il s’agit en fait d’une très bonne méthode pour écrire un composable.
On définit comment l’on souhaite utiliser le composable (faites-en une DX, ou expérience de développement, agréable) AVANT d’implémenter les détails.
Cette approche de conception s’applique à tous les types de fonctionnalités (composants, magasins, etc.) et nous pouvons certainement l’appliquer aux composables également.
Définir un état réactif pour le composable
Maintenant, créons un état réactif pour savoir quel élément de la liste est actif. C’est ce qui en fait un composable et qui le rend utile dans le contexte d’une application Vue. Ce que nous voulons vraiment savoir, c’est la position de l’élément actif. Créons donc un ref
réactif activeIndex
.
|
|
Ensuite, nous pouvons créer des données dérivées réactives (c’est-à-dire une variable computed
) pour déterminer ce que vaudra menuOpen
en fonction de la valeur de isDesktop
.
|
|
Définir des fonctions exposées pour le composable
Avec cela, prev
et next
sont vraiment faciles à implémenter.
|
|
Fournir au composable des arguments réactifs
Une chose importante à prendre en compte lors de l’écriture d’un composable est que les gens travaillent souvent avec des données réactives dans leurs composants. Ils s’attendent ainsi à pouvoir passer intuitivement ces données réactives dans n’importe quel composable.
En d’autres termes, ils peuvent vouloir faire ceci :
|
|
Mettons donc à jour le composable pour qu’il accepte une liste réactive (une liste définie avec ref
ou reactive
).
|
|
Permettre au composable d’accepter des arguments non réactifs ET réactifs (plus des Getters !)
Ce qui précède est parfait pour accepter une liste réactive. Mais maintenant, nous avons OBLIGÉ le consommateur composable à passer quelque chose de réactif.
Certains peuvent préférer la facilité de passer un simple tableau quand cela s’avère nécessaire. Pas de soucis ! Nous pouvons supporter les deux avec une fonction d’aide de Vue appelée toRef
.
|
|
Maintenant nous pouvons supporter les deux types de données pour cette liste, et nous obtenons le support d’un troisième type de données GRATUITEMENT ! Tout ce qui suit fonctionne maintenant :
|
|
Vous pouvez en savoir plus sur toRef
dans la documentation de Vue.js. De plus, d’autres fonctions similaires existent pour créer des composants flexibles et robustes : toValue
et isRef
, entre autres.
Améliorer l’API du composable avec une propriété computed modifiable
Actuellement, si nous essayons de définir l’état (current
) à partir du composant, cela ne fonctionnera pas. Pourquoi ? Nous le définissons comme une propriété calculée ou computed.
|
|
Pour rendre l’API un peu plus flexible, on pourrait modifier le code pour mettre à jour la valeur de l’index courant dans la liste.
|
|
Rendre le composable TypeSafe
Jusqu’à présent, nous avons utilisé string[]
pour définir l’argument composable word
. C’est assez logique, car nous voulons que notre composable fonctionne pour un tableau de n’importe quoi (pas seulement des chaînes de caractères comme dans les exemples).
Cependant, la plupart des utilisateurs de TypScript savent que l’utilisation de any
ne rend pas le linter TypeScript très content. Sa présence signifie qu’on peut encore améliorer le code.
Utilisons donc un générique pour dire que chaque élément du tableau est un type de variable.
|
|
En quoi cela est-il utile ?
Maintenant, TypeScript peut déduire que notre état est un WritableComputedRef
du MÊME type que les éléments de la liste passée. Dans notre exemple, nous utilisons une chaîne de caractères.
Ce n’est pas une fonctionnalité 100% nécessaire, mais cela peut s’avérer utile en pensant à la façon dont tous les utilisateurs pourraient utiliser votre composable et de le rendre aussi intuitif que possible.
Conclusion
Les composables sont un outil puissant pour créer une logique réutilisable et avec un état dans vos applications Vue.js. Ils s’avèrent plus faciles à écrire que vous ne le pensez. Bien que VueUse fournisse une vaste gamme de composables pré-écrits pour vous, il y a certainement des moments où vous aurez besoin d’écrire les vôtres. Vous savez maintenant comment faire !
Suivez-moi !
Merci d’avoir lu cet article. Assurez-vous de me suivre sur X, de vous abonner à ma publication Substack et d’ajouter mon blog à vos favoris pour ne pas manquer les prochains articles.
Crédit : Photo de Pixabay