De nombreux codeurs Vue 2 sont devenus compétents dans l’utilisation de son bus d’événements intégré, pour découvrir qu’il a été supprimé dans Vue 3. Heureusement, si l’utilisation d’événements globaux via un bus d’événements est votre truc, il existe une solution de contournement. Voici comment créer des événements globaux dans Vue 3 à l’aide d’un bus d’événements.

Comment créer des événements mondiaux dans Vue 3 (solution) 👍

Les événements globaux, également appelés bus d’événements, peuvent être créés à l’aide d’une interface d’émetteur tierce telle que Gant. Voyons comment nous pouvons l’implémenter dans un projet.

Le package Mitt pèse moins de 200 octets. La fabrication est une très petite charge utile supplémentaire sur votre projet.

Tout d’abord, installez le package Mitt :

npm install mitt

Ensuite, injectez l’émetteur global dans votre main.js dossier:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const emitter = mitt()
const app = createApp(App)

app.config.globalProperties.emitter = emitter
app.mount('#app')

Configurez un composant pour déclencher un événement :

// Emitting Component File

export default {
    mounted() {
        this.emitter.emit('techozu', 'Component Mounted!')
    }
}

Dans cet exemple, nous émettons lorsqu’un composant est monté, mais vous pouvez émettre depuis n’importe où dans votre code, comme un clic sur un bouton.

Configurez un composant pour écouter et réagir à un événement :

//Receiving Component File

export default {
    mounted() {
        this.emitter.on('techozu', value => console.log('RECEIVED!', value))
    },
    beforeDestroy() {

        this.emitter.all.clear()
    }
}

Avec le code ci-dessus, le petit package Mitt est mis à la disposition de n’importe quel composant de l’ensemble de votre application.

Si vous avez des composants qui contiennent des écouteurs d’événements, qui sont créés et détruits périodiquement, assurez-vous de détruire les écouteurs lorsque le composant est détruit en utilisant this.emitter.off('eventID') ou this.emitter.all.clear().

Vous pouvez déclencher un événement à partir de n’importe quel composant de votre projet et écouter l’événement dans n’importe quel autre composant. Cela vous donne la liberté d’interconnecter votre hiérarchie et de ne pas émettre d’événements uniquement entre descendants.

Voici quelques fonctions Mitt supplémentaires qui peuvent être utiles :

this.emitter.all.clear() // Clear all events
this.emitter.off('eventID') // Clear event by ID
this.emitter.off('eventID', handler) // Clear specific handler by eventID
this.emitter.on('*', handler) // Listen to all events

Quand utiliser un Event Bus dans Vue 3 ?

Un bus d’événements peut être utilisé chaque fois que vous essayez de transmettre des données entre deux ou plusieurs composants, en particulier si les composants ne sont pas des descendants directs les uns des autres. Un bus d’événements peut également être utilisé en remplacement direct des fonctions d’émission enfant/parent de Vues.

Bien que le contrôle d’état avec Vuex exécute une grande partie des mêmes fonctionnalités qu’un bus d’événements, il complique parfois inutilement votre code. Si vous vous retrouvez à configurer un magasin Vuex pour simplement transmettre des événements entre les composants, vous devriez envisager d’utiliser éventuellement un bus d’événements à la place.

Notez que l’équipe de développement de Vue déconseille l’utilisation des bus d’événements car ils finissent par devenir difficiles à maintenir. Cependant, pour de très petits projets, ils peuvent être une solution solide.

Nous espérons que vous avez trouvé ce guide utile. Pour plus de trucs et astuces Vue 3, consultez notre section de codage Vue 3.

Categorized in:

Guide,