Создание глобальной шины событий в Vue 2

Development, Java | Amber | Комментировать запись

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

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

Примечание: Это руководство предназначено для Vue 2. В Vue 3 $on, $off и $once были удалены. Вместо них рекомендуется использовать внешние библиотеки, которые предоставляют эту функцию.

В этом мануале вы узнаете, как создать мощную встроенную шину событий Vue.

Требования

• Локальная установка Node.js (чтобы найти инструкции по установке, выберите соответствующий дистрибутив: mac OS, Debian, CentOS, Ubuntu).
• Базовые знания настройки и компонентов 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

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

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

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

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

2: Отправка событий

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

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

Вот как можно реализовать это с помощью EventBus.$emit(channel: string, payload1: any, …) в src/components/ClickCountButton.vue:

<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: Получение событий

Теперь любая часть вашего приложения сможет импортировать шину событий и прослушивать выбранный канал с помощью 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,…)).

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() – вообще без аргументов.

Заключение

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

Больше информации и упражнений по Vue.js можно найти на тематической странице нашего блога.