Как создать глобальную шину событий в Vue 2

Введение

Шаблон шины событий/публикация-подписка — это способ заставить несвязанные разделы вашего приложения взаимодействовать друг с другом.

Система событий, используемая в компонентах Vue, может использоваться в схеме шины событий/публикации-подписки.

Примечание. Это руководство предназначено для Vue 2. Рекомендуется для Vue 3.

В этой статье вы примените мощную встроенную шину событий Vue.

Предпосылки

Для выполнения этого урока вам понадобятся:

Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
Некоторое знакомство с использованием компонентов Vue.js может оказаться полезным.

Это руководство было проверено с помощью Node v15.3.0, npm v6.14.9 и vue v2.6.11.

Шаг 1 — Настройка проекта

Для целей этого руководства вы создадите проект Vue по умолчанию, сгенерированный с помощью @vue/cli.

npx @vue/cli create vue-event-bus-example --default

Это настроит новый проект Vue с настройками по умолчанию: Vue 2, babel, eslint.

Перейдите в только что созданный каталог проекта:

cd vue-event-bus-example

Вам нужно будет создать шину событий и экспортировать ее куда-нибудь, чтобы ее могли использовать другие модули и компоненты. Сначала создайте новый файл. Импортируйте библиотеку Vue. Затем экспортируйте его экземпляр.

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

Для этого руководства в качестве экземпляра была задана переменная EventBus.

По сути, вы получаете компонент, который полностью отделен от DOM или остальной части вашего приложения. Все, что на нем существует, — это его методы экземпляра.

Теперь, когда вы создали шину событий, вам нужно будет импортировать ее в свои компоненты и вызвать те же методы, которые вы использовали бы, если бы вы передавали сообщения между родительским и дочерним компонентами.

Далее применим EventBus.$emit().

Шаг 2 — Отправка событий

Рассмотрим сценарий с компонентом, который уведомляет все приложение о том, сколько раз он был нажат каждый раз, когда кто-то нажимает на него.

Примечание. В этом примере используется компонент с одним файлом, но вы можете использовать любой метод создания компонентов, который вам нравится.

Вот как вы можете реализовать это с помощью EventBus.$emit(channel: string, payload1: any, ...):

<template>
  <button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
</template>

<script>
import { EventBus } from '@/event-bus';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;
      EventBus.$emit('clicked', this.clickCount);
    }
  }
}
</script>

Этот код создает кнопку. Нажатие на кнопку отправит событие на канал (clicked) с полезной нагрузкой (clickCount).

Измените App.vue, чтобы использовать этот компонент.

<template>
  <div id="app">
    <ClickCountButton></ClickCountButton>
  </div>
</template>

<script>
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}
</script>

Далее применим EventBus.$on.

Шаг 3 — Получение событий

Теперь любая другая часть вашего приложения может импортировать шину событий и прослушивать канал clicked с помощью EventBus.$on(channel: string, callback(payload1, ...)).

Примените это к своему приложению, изменив App.vue:

<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}

const clickHandler = function(clickCount) {
  console.log(`The button has been clicked ${clickCount} times!`)
}

EventBus.$on('clicked', clickHandler);
</script>

Этот код создает прослушиватель событий для clicked и записывает в консоль сообщение о том, сколько раз была нажата кнопка.

Примечание. Если вы хотите прослушивать только первую передачу события, вы можете использовать EventBus.$once(channel: string, callback(payload1,...)).

Далее применим EventBus.$off.

Шаг 4 — Удаление прослушивателей событий

Вы можете отменить регистрацию обработчика из канала clicked, используя EventBus.$off(channel: string, callback(payload1,...)).

Примените это к своему приложению, изменив App.vue:

<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}

const clickHandler = function(clickCount) {
  console.log(`The button has been clicked ${clickCount} times!`)
}

EventBus.$on('clicked', clickHandler);

EventBus.$off('clicked', clickHandler);
</script>

Предоставляя событие и обратный вызов, EventBus.$off удалит прослушиватель только для этого конкретного обратного вызова.

Примечание. Вы также можете удалить всех слушателей для определенного события, используя EventBus.$off(clicked) без аргумента обратного вызова.

И если вам действительно нужно удалить каждого слушателя из EventBus, независимо от канала, вы можете вызвать EventBus.$off() вообще без аргументов.

Теперь вы использовали .$emit, .$on и .$off.

Заключение

В этом руководстве вы использовали мощную встроенную шину событий Vue для прослушивания события clicked и регистрации сообщения с количеством кликов. Это было достигнуто за счет использования .$emit, .$on и .$off.

Если вы хотите узнать больше о Vue.js, посетите нашу тематическую страницу Vue.js, где вы найдете упражнения и проекты по программированию.