Comment écouter tous les événements personnalisés dans VueJS?

Question

Dans mon application VueJS, j'ai une instance Vue que j'utilise comme un bus d'événement pour envoyer des données entre les composants.

C'est juste ceci :

import Vue from 'vue';
export const EventBus = new Vue();

Ensuite, dans mes composants, j'importe EventBus et j'utilise EventBus.$emit() et EventBus.$on() dans mes composants.

Cette approche est expliquée ici : https://alligator.io/vuejs/global-event-bus/

Ce que j'aimerais pouvoir faire, c'est écouter tous les événements qui sont envoyés via EventBus. Si je pouvais lier un écouteur à tous les événements, je pourrais l'utiliser pour le journalisation ou pour alimenter des données dans un système pour mon environnement de développement qui me montrerait toutes les données au fur et à mesure qu'elles passeraient par EventBus, ce qui serait super utile.

Y a-t-il un type de vm.$listenToEverything() que je n'ai pas remarqué ou une façon de faire fonctionner cela?

Answer 1

Si vous êtes dans un contexte ES6, vous pourriez adopter l'une des approches ci-dessous. Je l'explique à travers des commentaires.

Remplacement par héritage

'use strict'

import Vue from 'vue'

export class EventBus extends Vue {
  // Enregistrer un callback personnalisé en tant qu'intercepteur appelé à chaque émission d'événement.
  // Il peut également être lié à $on. 
  $meddle (callback) {
    this.meddler = callback
  }

  // Remplacer $emit de Vue pour appeler le callback d'intercepteur personnalisé à chaque émission d'événement.
  $emit (event, ...args) {
    if (this.meddler && typeof this.meddler.call === 'function') {
      this.meddler(event, ...args)
    }

    return super.$emit(event, ...args)
  }

  // Nous pouvons également remplacer $on() pour écouter les callbacks enregistrés.
}

export default new EventBus()

Remplacement par détournement

Ou en utilisant une classe d'usine de "détournement" dans le cas où vous ne voulez pas qu'une instance de votre bus d'événements Vue soit enveloppée. La logique est essentiellement la même, cependant, dans cette approche, nous "détournons", ou en d'autres termes, "monkey patch" les méthodes au lieu de les remplacer directement.

'use strict'

import Vue from 'vue'

class EventBusFactory {
  static create () {
    return this.hijack(new Vue())
  }

  static hijack (bus) {
    bus.$meddle = callback => {
      bus.meddler = callback
    }

    const orig$emit = bus.$emit
    bus.$emit = (event, ...args) => {
      if (bus.meddler && typeof bus.meddler.call === 'function') {
        bus.meddler(event, ...args)
      }

      orig$emit.call(bus, event, ...args)
    }

    return bus
  }
}

export default EventBusFactory.create()

Answer 2

L'auteur de VueJS a fourni une solution astucieuse pour écouter tous les événements :

var oldEmit = this.compiler.emitter.emit
this.compiler.emitter.emit = function () {
    console.log('événement reçu : ' + arguments[0])
    oldEmit.apply(this, arguments)
}

Une autre solution (qui est censée fonctionner également sur v1.0) :

const old_on = this.$on;
this.$on = (...args) => {
  // logique personnalisée ici comme pousser dans un tableau de rappel ou autre
  old_on.apply(this, args);
};