Введение в vue-communication

• Это набор средств для отслеживания и отладки взаимодействия компонентов Vue.
• Любые связанные компоненты могут непосредственно общаться друг с другом.
• Поддерживает мониторинг изменений данных между компонентами.
• Поддерживает отправку оффлайн-данных.

Совместимость с Internet Explorer

Из-за того, что этот компонент ещё не собран в виде dist, если ваш браузер требует совместимости с IE, добавьте следующую конфигурацию в файл vue.config.js: transpileDependencies:["vue-communication"]

Установка

yarn add vue-communication
# или npm install vue-communication -D

Импорт

import {$sender, $receiver} from 'vue-communication';
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;

Видео-уроки

Видео-урок

Пример использования

Основные понятия: Этот компонент предоставляет два основных API — это отправитель $sender и получатель $receiver. Все сообщение осуществляется через эти методы. Отправитель $sender используется для передачи намерений, а не конкретных данных.

Намерения: dataOnce, modifyOnce, data, modify, watch Существуют пять типов намерений, которые охватывают: однократную и многократную отправку данных, однократное и многократное изменение данных, мониторинг изменений данных между компонентами.Отправка данных: Если компонент A хочет отправить данные компоненту B один раз: A использует this.$sender('dataOnce-A-B', {d: 'мои данные'}). B может использовать this.$receiver('dataOnce-A-B') в любое время после установки. Этот метод вернет объект Promise, который можно получить с помощью .then.Для многократной отправки используйте this.$sender('data-A-B', 'these are my data'). Каждый вызов этого метода будет приводить к повторному получению данных в соответствующем компоненте.

При многократной отправке вам следует использовать обратный вызов вместо Promise: this.$receiver('data-A-B', function(data) { /* data — это ваши данные */ }).

Внимание: Формат 'intention-component1-component2' является обязательным. Независимо от того, как длинно название вашего компонента, вы должны указывать его полностью!Подтверждение получения: Когда вы делегируете задачу отправки данных компоненту B, он должен подтвердить получение этих данных. Это называется подтверждением получения. Обратите внимание, что подтверждение операции доступно только для одноразовых действий, таких как dataOnce и modifyOnce. Они возвращаются через объект Promise, переданный $sender, позволяющий отправителю знать, когда его данные были приняты.

this.$sender("dataOnce-A-B", "木瓜太香")
.then(flag => {
    console.log("Получатель получил данные!")
})

Изменение данных: Компонент A использует this.$sender("modifyOnce-A-B", "name", "木瓜太香"), чтобы указать, что компонент A хочет изменить свойство name в компоненте B на значение "木瓜太香". Компонент B использует this.$receiver("modifyOnce-A-B", "name"), чтобы завершить изменения. Внимание: второй аргумент обязательно должен быть передан, так как это разрешение, которое показывает, что вы согласны с тем, что компонент A может изменять текущее свойство name. Если вы ошибётесь при передаче этого параметра или просто пропустите его, то разрешение будет недействительным. Это реализация, которая делает изменения данных предсказуемыми и заставляет разработчика более внимательно относиться к тому, что он делает. Если вам нужно изменить свойство name внутри объекта obj, вы можете использовать следующую конструкцию: this.$sender("modifyOnce-A-B", "obj.name", "木瓜太香").Если вам нужно выполнить несколько изменений, вы можете использовать модификаторы намерений, аналогично примеру использования намерения data. В настоящее время изменения не имеют обратного вызова, но если вам нужно знать, когда данные были изменены, вы можете отслеживать это внутри вашего компонента.

Отслеживание данных между компонентами: Допустим, компонент A хочет отслеживать изменения значения name в компоненте B. Компонент A использует this.$sender("watch-A-B", "person.name", function(nv, ov) { // nv — новое значение, ov — старое значение }). Компонент B должен предоставить одно разрешение: this.$receiver("watch-A-B", "person.name").## Очиститель Очиститель является функцией, равной по значению функциям $sender и $receiver$, поэтому имеет смысл выделить его отдельным заголовком. Небрежное отношение к роли очистителя может привести к непредвиденным последствиям, однако после изучения его использования вы узнаете больше деталей работы Vue во время выполнения и сможете избежать этих проблем. Очиститель можно импортировать через этот компонент: import { $cleaner } from 'vue-communication'Основная задача Cleaner заключается в удалении намеренных событий. Внутриvue-communicationиспользуется метод emit on с некоторыми очередями для реализации передачи данных. Однако есть ситуации, когда такой способ передачи данных может привести к странным поведениям программы. Например, при использовании намеренияdata-A-B` для отправки данных, вы можете получить следующие проблемы:

Если вы используете этот намерение для отправки данных из компонента A и пытаетесь получить эти данные в компоненте B в методе mounted, то это будет эквивалентно тому, как слушатель события был установлен глобально. Это значит, что он не будет автоматически удаляться вместе с компонентом B при его разрушении.При переходе от компонента A к компоненту B после того, как B был разрушен, могут возникнуть две проблемы:

1. При каждом создании компонента B слушатель события будет повторно добавлен.
2. После отправки данных из компонента A они будут немедленно получены, даже если компонент B ещё не был создан.Чтобы решить вышеописанные проблемы, вам следует добавить обработчики разрушения компонентов, где каждый компонент, который является приемником данных, также удаляет намеренные события до своего разрушения.

Использование: this.$cleaner('data-A-B')