Простой способ реализовать шаблон SubPub в проекте Vue.js с библиотекой PubSubJs и пользовательским хуком.
Что такое шаблон PubSub и PubSub.js?
Во-первых, я думаю, мы должны понять, что такое шаблон Pub/Sub. Основываясь на Википедии, у нас есть краткое определение этого шаблона:
Pub-Sub — это шаблон обмена сообщениями, в котором отправители сообщений, называемые издателями, не программируют сообщения для отправки напрямую конкретным получателям, называемым подписчиками, а вместо этого классифицируют опубликованные сообщения по классам, не зная, какие подписчики, если таковые имеются, могут существовать. . Точно так же подписчики проявляют интерес к одному или нескольким классам и получают только те сообщения, которые представляют интерес, не зная, какие издатели, если таковые имеются, существуют.
Проще говоря, мы можем определить этот шаблон двумя вещами: издателем и подписчиком. Задача издателя (Pub) — отправить сообщение в тему. Миссия подписчика (Sub) состоит в том, чтобы получить (или обработать) сообщение из темы. Таким образом, мы можем упростить некоторые действия с этим шаблоном.
Что касается PubSubJS, это библиотека, написанная на JavaScript для реализации этого шаблона. В этой статье я буду использовать эту библиотеку, потому что она популярна и проста в использовании. Если вам нравится использовать другие библиотеки или способы, давайте сделаем это.
Я могу показать вам один из широко распространенных вариантов использования этого шаблона. На веб-сайте покупок нам нужно выполнить некоторые действия в некоторых компонентах, когда пользователи добавляют товар в свою корзину. Я знаю, что мы можем использовать глобальное состояние (Redux, Vuex…) для хранения данных корзины. Я знаю, что мы можем использовать глобальное состояние (Redux, Vuex…) для хранения данных корзины. Наша миссия - просто наблюдать за изменением этого списка продуктов. Это хороший способ, но он также усложняет вашу логику. Потому что вам нужно написать некоторую логику, чтобы проверить (или сравнить) изменение в списке продуктов. С PubSub вам просто нужно опубликовать сообщение в теме «add_new_product_to_cart» с содержанием, которое является данными этого продукта. Каждый компонент, который слушает эту тему, может легко справиться с этим.
Базовое орудие
Прежде чем приступить к реализации шаблона Pub-Sub в нашем приложении, мы должны подумать о том, какие функции нам нужно добавить в наше приложение. Помимо двух обязательных функций, таких как публикация сообщения и подписка на тему, я думаю, что у нас есть много других функций. Но чтобы не усложнять эту статью, я просто делаю две другие функции: отписку и проверку статуса подписки подписчиков.
В этой статье я сделаю демонстрацию проекта Vue 3. Во-первых, нам нужно создать проект Vue. У нас есть много способов сделать это. Что касается меня, я запущу эту команду, чтобы запустить новый проект Vue:
vue create pubsub-demoЗатем давайте установим PubSubJS с помощью этой команды:
yarn add pubsub-jsПосле этого нам нужно место для хранения нашего исходного кода. Я создам каталог в «/src/PubSub». Кроме того, вызывать методы из PubSubJS напрямую, я думаю, надо сделать так, чтобы это делали два класса, и наши компоненты будут работать с ними. Это подписчик и издатель. Я определю некоторые основные методы для них здесь:
С Publisher мы можем создать экземпляр со специальной темой. Этот класс предоставляет нам метод «publish» для публикации сообщения в теме, которую мы определили при создании этого экземпляра.
Что касается подписчика, этот класс создается со специальной темой и обратным вызовом. Он имеет два метода подписки и отписки. С их помощью мы можем контролировать статус подписки подписчика. Если мы запустим метод subscribe, наш обратный вызов будет вызван, когда наша тема получит сообщение.
Основываясь на документе PubSubJS, я определю два класса следующим образом:
Чтобы протестировать эти классы, нам нужно создать два компонента. Первый компонент — PublishMessage. Там мы поместим текстовое поле и кнопку. При нажатии кнопки этот компонент будет публиковать текст из текстового поля в виде сообщения в специальной теме. Давайте создадим этот компонент в «src/components/PublishMessage».
В этом компоненте я использовал Composition API с одной реактивной переменной «value» и одной функцией «publish», которая будет публиковать значение из «value» в тему «test_topic» в виде сообщения. Эта функция «публикации» будет вызываться, когда мы нажимаем кнопку «Опубликовать».
После того, как мы создали компонент для публикации сообщения, мы собираемся сделать еще один компонент для получения сообщения из темы. В этот компонент мы поместим подписчика. Этот подписчик будет слушать «test_topic» и показывать сообщение. Давайте посмотрим код:
Затем мы можем протестировать эту демонстрацию, добавив компоненты, которые мы создали, в наше приложение. Это может быть так:
<PublishMessage /> <HandleMessage />
Давайте протестируем эту демонстрацию, набрав несколько слов и нажав кнопку «Опубликовать».
Как видите, получилось! Мы можем создать множество изолированных компонентов и применять их таким образом, когда хотим, чтобы они взаимодействовали друг с другом.
Пользовательский хук для PubSub
Прежде чем мы начнем создавать собственный PubSub, я хочу сделать небольшое замечание, что «это необязательно». Мы можем вызвать экземпляр Subscriber напрямую, без проблем. Но с помощью пользовательского хука мы можем обернуть часть нашей логики и упростить ее использование на уровне компонентов. Есть несколько вещей, которые мы можем сделать с нашим крючком:
- Создание нового экземпляра с меньшим количеством строк кода.
- Отпишитесь от темы, когда компонент размонтируется.
- Предоставьте нам реактивные данные для проверки статуса подписки подписчика.
Теперь давайте создадим новый пользовательский хук здесь «/src/PubSub/usePubSub.js». В этом файле мы создадим два пользовательских хука «usePublish» и «useSubscribe».
Что касается хука «usePublish», его довольно легко сделать. Просто нужно создать и вернуть новый экземпляр Publisher следующим образом:
И просто нужно немного изменить компонент, чтобы использовать этот хук вместо непосредственного создания экземпляра Publisher. Вот наши изменения:
Давайте снова протестируем нашу демонстрацию после того, как мы ее изменили.
Это все еще работало. Теперь мы перейдем к следующей части, создав кастомный хук для создания подписчика. То же самое с usePublish, мы переместим код с уровня компонента на наш хук следующим образом:
В компоненте мы можем обновить мой исходный код, чтобы использовать пользовательский хук:
Давайте проверим демо:
Это сработало! На этом шаге мы переместили почти все, что делали из компонента, в пользовательский хук. Затем мы сделаем несколько новых вещей. Начнем с отмены подписки на топик, когда компонент размонтирован. Для этого Vue предоставляет нам Composition API «onUnmounted». Там мы можем обработать некоторые вещи, которые хотим сделать, прежде чем компонент будет размонтирован.
Чтобы проверить это изменение, я помещу «console.log» в «onUnmounted» этого хука. Затем я создам флажок для переключения компонента HandleMessage. Нам просто нужно проверить результат в консоли.
Судя по результату, думаю, получилось. Мы перейдем к следующей и последней части, возвращая реактивные данные для статуса подписки. Для этого нам нужно добавить реактивную переменную и вернуть ее в наш хук. Каждый раз, когда пользователь вызывает метод «подписаться» или «отписаться», мы будем обновлять значение этой переменной. Давайте сделаем это, я думаю, это так просто.
В этот хук мы добавили еще одну реактивную переменную isSubscribeing. Когда пользователь вызывает метод «подписаться» или «отписаться», мы будем обновлять значение этой переменной. Теперь этот хук будет возвращать две функции и одну переменную вместо экземпляра подписчика. Чтобы протестировать эту часть, нам нужно немного изменить ее в нашем компоненте. Во-первых, нам нужно добавить две кнопки для изменения статуса подписки. Во-вторых, нам нужно показать статус подписки в виде текста. Вот этот компонент после того, как мы его изменили:
Теперь давайте проверим это.
Тада! Это сработало. Мы видим в «первом сообщении», что это сработало нормально. После того, как мы нажмем кнопку «Отписаться», текст изменится, и компонент HandleMessage не отреагирует никаким новым сообщением. Затем, когда мы нажимаем кнопку «Подписаться», этот компонент снова работает в обычном режиме.
С этими изменениями, я думаю, мы не можем больше думать в нашем компоненте, например, управлять «представлением рендеринга» с помощью переменной «isSubscribeing» вместо создания еще одной реактивной переменной.
Заключение
Это короткая статья о том, как сделать еще один способ поддерживать связь между компонентами в Vue. Я надеюсь, что эта статья будет полезна для вас, ребята. Если у вас есть какие-либо другие идеи о Vue или о чем-то еще, сообщите мне.
Есть несколько документов, которые я прочитал, чтобы написать эту статью:
Вот репозиторий GitHub, в котором есть весь исходный код нашей демонстрации:
Спасибо за прочтение.
Свяжитесь со мной через Linkedin или Twitter.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
