В этой статье я хочу рассмотреть два способа создания легко повторно используемых компонентов закусочной панели с использованием как Vuetify, так и Vuex. Снэкбары - это простой способ отображать информацию для ваших пользователей, они занимают очень мало места на экране, что делает их жизнеспособными как для настольных, так и для мобильных приложений. Один из самых мощных шаблонов во Vue - это возможность создавать компоненты, такие как закусочная, которые можно использовать повторно без повторения блоков кода во всем приложении. Для наших целей мы создадим два разных примера: один использует Vuex для управления центральным состоянием, содержащим нашу закусочную, а второй метод использует события, передаваемые через свойства и события vanilla Vue.js / Vuetify.
Строительные леса
Во-первых, давайте настроим каркас для нашего приложения. Мы собираемся использовать пакет vue-cli, чтобы начать новую установку с помощью команды vue init vuetifyjs/webpack snackbar-demo. Если вы не хотите запускать cli самостоятельно, вы также можете клонировать базу для этого проекта из этого репозитория Github. Мы будем использовать рекомендуемые настройки для среды выполнения и убедитесь, что мы отметили да, чтобы сформировать приложение с установленным vue-router. После новой установки ваше файловое дерево должно выглядеть примерно так:
Отсюда мы собираемся начать с очистки большей части исходной структуры приложения и создания некоторых контейнеров для представлений нашего приложения. Мы собираемся использовать действительно простой макет CRUD, чтобы показать, как легко управлять кодом закусочной панели из отдельных компонентов.
После удаления значительной части разметки по умолчанию я получил свой App.vue файл так:
Шаблон:
Сценарий:
Жестко закодировав пару свойств в DOM и удалив множество лишних частей, мы очистили наш data объект и сделали шаблон намного чище. Также обратите внимание на router-view между тегами v-layout. Здесь мы собираемся разместить наши новые файлы с vue-router.
Начальная маршрутизация
Давайте настроим эти новые файлы. Измените значение по умолчанию HelloWorld.vue на Home.vue, просто ради соглашения об именах. Давайте продолжим и создадим Create.vue, Read.vue, Update.vue и Delete.vue. Мы будем использовать эти файлы для наших представлений, которые собираемся добавить.
Приступим к разметке нашего Hello.vue файла. Давайте очистим теги template, script и style, чтобы мы могли начать все заново. Мы собираемся добавить четыре кнопки в тег v-flex, чтобы мы могли ссылаться на наши недавно созданные представления с домашней страницы.
Первый шаг нашего шаблона выглядит так:
Теперь давайте убедимся, что приложение знает, что делать с этими to аргументами.
Откройте файл index.js в папке router. Синтаксис для vue-router довольно прост, мы будем следовать примеру из каркаса, чтобы настроить наши представления.
Мы собираемся отредактировать HelloWorld маршрут к нашему недавно названному компоненту Home и добавить маршруты для четырех новых компонентов, которые мы создали.
Разметка для index.js выглядит так:
Компонент Строительство
Теперь, когда наши представления и маршруты настроены, мы собираемся добавить в компоненты разметку по умолчанию, чтобы добавить нашу базовую функциональность. В Vuex я хочу настроить файлы Update.vue и Delete.vue. Одним из преимуществ использования Vuex здесь является то, что мы получаем доступ к некоторым действительно простым методам поддержки и обновления наших компонентов закусочной.
Инициализация файла Vuex
Чтобы начать с Vuex, нам нужно установить его в нашем проекте и настроить в нашем main.js файле. Мы также собираемся создать папку в нашем src каталоге с именем store с одним файлом с именем store.js.
В нашем store.js файле мы собираемся экспортировать новое хранилище Vuex, которое имеет состояние нашей закусочной, а также мутации, которые позволяют нам получать доступ и изменять значения этого состояния. Мы собираемся использовать эти мутации в нашем приложении, чтобы изменить видимость, текст и другие аспекты закусочной.
Когда все будет готово, вот состояния этих файлов.
Теперь, когда хранилище внедрено в наш экземпляр Vue, мы можем получить доступ к состоянию и изменениям из любого места в нашем приложении. Мы собираемся использовать это состояние, чтобы показать закусочную из других наших компонентов. Но сначала нам нужно создать новый компонент закусочной, который мы сможем показать из нашего приложения. Мы собираемся создать этот новый компонент, а затем добавить его над нашим видом маршрутизатора на нашем основном App.vue компоненте.
Создание компонента Vuex Snackbar
Вот содержимое нашего нового компонента SnackbarStore.vue
Мы собираемся использовать этот компонент закусочной и мутации из нашего магазина Vuex для отправки информации из компонентов Update.vue и Delete.vue. Во-первых, давайте импортируем компонент в файл App.vue и разместим его прямо над нашим тегом router-view.
Реализация мутаций Vuex
Теперь, когда наши файлы настроены, мы можем получить доступ к методам мутации для наших компонентов Vuex изнутри наших Update и Delete файлов. Мы собираемся использовать базовую структуру компонентов с упором на методы кнопок и с импортом функции, который позволяет нам легко внедрять наши мутации Vuex в файл.
Используя мутацию showSnackbar в нашем файле, мы можем создать панель с надписью «Вы что-то обновили», установив мутацию на метод, вызываемый нажатием кнопки. Вы также можете использовать полезную нагрузку (переданную в объекте showSnackbar для управления другими параметрами закусочной, которые мы разместили в хранилище Vuex. Мы можем добавить ту же логику в файл Delete.vue, чтобы получить ту же функциональность, и можем реплицируйте его в любом файле в нашем приложении, чтобы вызывать и закрывать закусочные с различными позициями, текстами и аргументами тайм-аута в зависимости от конкретных потребностей использования каждого компонента.
Подведение итогов Vuex
Если вы раньше не видели возможностей Vuex, это прекрасный пример того, почему централизованное управление состоянием может принести пользу даже небольшому приложению. Возможность абстрагироваться от целых частей компонентов и допускать легкое повторное использование кода является фантастическим преимуществом на любом уровне создания вашего приложения.
Создание компонентов события
Теперь, когда мы поработали над использованием мутаций Vuex для создания компонентов нашей закусочной, мы собираемся вернуться к использованию ванильного Vue и взглянуть на шаблон эмиттера событий для создания повторно используемых блоков. Мы начнем с создания шаблонов оставшихся компонентов CRUD. Шаблон для Create.vue и Read.vue получит кнопку возврата на главную, а также кнопку, специфичную для функции, которая будет запускать наши компоненты закусочной.
В каждый файл мы добавим следующее (при необходимости заменив Create / Read):
Вскоре мы собираемся использовать метод snackbarButton для управления панелью закусок, которую мы добавляем в наш файл App.vue.
Реализация закусочной
В файле App.vue давайте настроим шаблон закусочной, чтобы он был доступен для нас. Мы собираемся добавить компонент v-snackbar над тегами router-view, чтобы мы могли получить к нему доступ из любого дочернего представления. Наша разметка закусочной по умолчанию использует следующую разметку (взятую в основном прямо из документации):
Разметка устанавливает все параметры для закусочной в объекте data, и позволяет DOM определять, как отображать на основе этого. Мы собираемся сделать еще одно дополнение к нашему файлу App.vue, чтобы он был готов продемонстрировать свою новую причудливую закусочную. Мы собираемся добавить слушателя к нашим представлениям, чтобы они могли общаться, когда нужно показать закусочную. Мы также собираемся добавить метод, который форматирует закусочную на основе параметров, переданных из представления.
Вышеупомянутый метод устанавливает все параметры для снекбара (устанавливая значение по умолчанию для timeout и yPos), прежде чем окончательно установить для снекбара значение true, чтобы его можно было отобразить.
Эмиттеры событий
После настройки метода и прослушивателя остается последняя часть - добавить эмиттер для дочерних компонентов, из которых мы хотим отображать панели закусок! Добавим эмиттеры в Create.vue и Read.vue.
В двух файлах компонентов мы хотим добавить к нашему исходному методу, чтобы мы могли сообщить родительскому компоненту о появлении новых аргументов для снекбара. Мы собираемся добавить эмиттер для прослушивателя showSnackbar, который устанавливает текст, тайм-аут и положение закусочной.
In Create.vue
Теперь, если вы обновите страницу и перейдете на страницу создания, нажатие кнопки «Создать» должно сгенерировать внизу панель закусок с надписью «Вы что-то создали!» Это должно длиться пять секунд.
Давайте перейдем к Read.vue и реализуем нечто подобное. На этот раз мы будем использовать больше параметров по умолчанию для нашего метода и упростим эмиттер.
In Read.vue:
Если вы нажмете кнопку «Прочитать» в компоненте, вы увидите, что отображается правильный текст, а снэк-панель длится три секунды в верхней части экрана, поскольку мы указали параметры по умолчанию в методе на App.vue.
Сводка новостей об эмиттере
Этот шаблон эмиттера действительно прост и отлично подходит для взаимодействия между небольшими вложенными компонентами. Эмиттер может быть семантическим, как и имена методов, поэтому вы можете отслеживать, где и что вы вызываете.
Заключение
Будем надеяться, что описанные выше две отдельные реализации закусочной панели помогут вам начать думать о своих компонентах и контенте, чтобы их можно было использовать повторно. Одним из самых больших преимуществ использования Vue и Vuetify является возможность создавать и поддерживать функциональные и красивые фрагменты кода, которые можно повторно использовать во всем приложении, чтобы расширить свои возможности как разработчика без необходимости написания дополнительного кода.
Если вам нужен законченный код из этого проекта, вы можете найти репо здесь, на Github.
Какими еще способами вы создавали повторно используемые компоненты? Какие еще применения вы нашли для управления Vuex в состоянии вашего компонента? Позвольте мне знать в комментариях ниже!
