Depuis que je travaille sur la version 2.0 de l’interface utilisateur de mon produit (qui sortira en mai), je publie quelques astuces techniques que j’ai apprises en migrant mon application de Vuejs 2 vers Vuejs 3.
La version actuelle de l’application frontale Inspector utilise un bus d’événements global. Il est nécessaire de rendre le composant racine de l’application (App.vue) conscient de certains événements particuliers déclenchés à l’intérieur de la chaîne de composants.
Avant d’entrer dans les détails de cette implémentation spécifique, permettez-moi de décrire les principes de communication des composants dans Vuejs et pourquoi nous avons décidé d’utiliser un bus d’événements global même si ce n’est pas une pratique recommandée.
Communication des composants Vuejs
Dans Vuejs, chaque composant est responsable du rendu d’une partie de l’interface utilisateur avec laquelle les utilisateurs interagissent. Parfois, les composants se suffisent à eux-mêmes. Ils peuvent récupérer des données directement à partir des API backend. Le plus souvent, un composant est un enfant d’une vue plus structurée qui doit transmettre des données aux composants enfants pour restituer une partie spécifique de l’interface utilisateur.
Les composants peuvent exposer les accessoires à leurs parents. Les accessoires sont les données dont un composant a besoin d’un parent pour le faire fonctionner.
Dans l’exemple ci-dessous, le composant a besoin de l’objet utilisateur pour restituer son nom avec différents styles en fonction de son rôle :
<template>
<span :class="{'text-danger': user.is_admin}">
{{user.first_name}} {{user.last_name}}
</span>
</template>
<script>
export default {
props: {
user: {
type: Object,
required: true
}
}
}
</script>Cette stratégie renforce la réutilisabilité, favorise la maintenabilité et constitue la meilleure pratique.
Mais, cela ne fonctionne que pour les composants avec une relation directe dans l’arbre, comme un Menu.vue composant qui utilise le User.vue composant pour afficher le nom d’utilisateur :
<template>
<div class="menu">
<a href="#" class="menu-item">
Home
</a>
<a href="http://dzone.com/user" class="menu-item">
<User :user="user"/>
</a>
</div>
</template>
<script>
export default {
data() {
return {
user: {}
};
},
created() {
axios.get('/api/user').then(res => this.user = res.data);
}
}
</script>Comment des composants indépendants peuvent-ils communiquer ?
État global de Vuejs
Il existe deux manières de faire communiquer entre eux des composants non liés :
- Vuex
- Autobus d’événement
Vuex est une bibliothèque de gestion d’état. A première vue, cela semble compliqué, et en fait, ça l’est un peu. Vous pouvez utiliser Vuex pour stocker des données qui doivent être utilisées globalement dans votre application. Vuex vous fournit une API solide pour appliquer les modifications à ces données et les refléter dans tous les composants enfants qui utilisent le magasin de données Vuex.
Le bus d’événements est lié à l’architecture classique des événements/écouteurs. Vous déclenchez un événement qui sera traité par une fonction d’écoute s’il y en a une enregistrée pour cet événement.
98 % des éléments de votre application typique ne sont pas une fonction, mais plutôt un état. Donc, vous devez utiliser Vuex pour tout par défaut et revenir à un bus d’événements lorsque Vuex devient un obstacle.
Cas d’utilisation du bus d’événements : notre scénario
J’ai rencontré un scénario où j’ai besoin d’exécuter une fonction, pas de gérer un état. Ainsi, Vuex ne fournit pas la bonne solution.
Dans Inspector, le lien pour accéder au formulaire de création d’un nouveau projet est réparti sur plusieurs parties de l’application. Lorsque le projet est créé avec succès, l’application doit immédiatement rediriger vers la page d’instructions d’installation. Peu importe où l’on se trouve dans l’application, il faut pousser la nouvelle route dans le routeur pour forcer la navigation :
(project) => {
this.$router.push({
name: 'projects.monitoring',
params: {
id: project.id
}
});
};Comment créer un bus d’événements dans Vue3
Vue 2 a un bus d’événements interne par défaut. Il expose la $emit() et $on() méthodes pour déclencher et écouter les événements.
Ainsi, vous pouvez utiliser une instance de Vue comme bus d’événements :
export const bus = new Vue();Dans Vue 3, Vue n’est plus un constructeur, et Vue.createApp({}); renvoie un objet qui n’a pas $on et $emit méthodes.
Comme suggéré dans la documentation officielle, vous pouvez utiliser la bibliothèque mitt pour répartir les événements entre les composants.
Tout d’abord, installez le gant :
Ensuite, j’ai créé un plugin Vue pour faire un gant instance disponible dans l’application :
import mitt from 'mitt';
export default {
install: (app, options) => {
app.config.globalProperties.$eventBus = mitt();
}
}Ce plugin ajoute simplement le $eventBus propriété globale à l’instance de Vue afin que nous puissions l’utiliser dans chaque appel de composant this.$eventBus.
Utilisez le plug-in dans votre instance d’application :
import { createApp } from 'vue';
const app = createApp({});
import eventBus from './Plugins/event-bus';
app.use(eventBus);Maintenant, nous pouvons déclencher l’événement « créé par le projet » à partir du formulaire de projet pour déclencher la fonction définie dans le App.vue composant:
this.$eventBus.emit('project-created', project);L’écouteur global est placé dans le composant racine de l’application (App.vue):
export default {
created() {
this.$eventBus.on('project-created', (project) => {
this.$router.push({
name: 'projects.monitoring',
params: {
id: project.id
}
});
});
}
}Conclusion
À présent, vous devriez avoir une meilleure compréhension de la migration de Vuejs 2 vers Vuejs 3, des communications des composants Vuejs et de l’état global de Vuejs. J’espère que cet article vous aidera à prendre de meilleures décisions pour la conception de votre application.