Программное обеспечение что-то делает. И когда это происходит, мы часто хотим рассказать пользователям, что произошло. Например, сообщить им, что что-то успешно сохранено или произошла ошибка.

Есть много способов сделать это, но один из моих любимых - закусочная Material Design. Это небольшое сообщение, которое временно появляется в нижней части экрана, чтобы сообщить пользователям, что что-то произошло.

В этом руководстве используются Nuxt.js и Vuetify, но он может работать для любого приложения Vue.js, использующего Material Design, или даже может быть адаптирован для работы с эквивалентом закусочной панели в любом наборе инструментов пользовательского интерфейса, который вы предпочитаете.

Если вы хотите взглянуть на код для этого, ознакомьтесь с открытым круглосуточным репозиторием на моем GitHub.

Что такое Vuex?

Магия в этом - Vuex. Если вы не знакомы с Vuex, не волнуйтесь: все откроется. Vuex - это способ управления состоянием в приложении Vue.js, который выходит за рамки состояния отдельных компонентов. Хранилище Vuex позволяет запрашивать и изменять глобальное состояние приложения из кода любого компонента.

Nuxt.js имеет встроенную поддержку Vuex, которая автоматически включается, как только файлы создаются в хранилище / подкаталоге вашего проекта.

1. Начальная загрузка вашего приложения

Самый быстрый способ развернуть приложение Nuxt.js с помощью Vuetify - использовать шаблон. Вы должны быть в состоянии добраться до того момента, когда у вас будет запущено приложение Vuetify, выполнив только следующие шаги:

vue init vuetifyjs / nuxt open-all-hours
cd open-all-hours
пряжа
пряжа run dev

Посетите http: // localhost: 3000 /, и вы увидите, что запущено базовое приложение Material Design. Большой! Теперь можно приступить.

2. Создание компонента Snackbar.

Vuetify поставляется с готовым компонентом пользовательского интерфейса v-snackbar, поэтому давайте создадим наш собственный компонент в components / Snackbar.vue, который отображает сообщение и имеет логическое значение show, которое управляет его видимость:

Теперь вы можете добавить его в свой default.vue. Я поместил его прямо в v-app. Не забудьте импортировать компонент и добавить его в свой список компонентов. Смотрите готовый файл, если застряли.

Попробуйте настроить значения message и show в Vue devtools, чтобы проверить, работает ли оно должным образом:

3. Магазин Vuex для хранения сообщений закусочной.

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

Создайте файл с именем store / snackbar.js и поместите в него следующее:

Это требует небольшого объяснения, поэтому я разобью его.

Nuxt позволяет вам писать весь код для хранилищ Vuex, но он также предварительно настроен для режима модулей Vuex, что резко сокращает объем необходимого кода и позволяет разделить хранилище на семантические пространства имен в зависимости от имени файла. Вызов файла snackbar.js создает модуль Vuex под названием snackbar.

Верхняя половина файла представляет состояние модуля Vuex. В Vuex состояние - это неизменяемый объект JavaScript, к которому можно получить доступ из любого места в вашем приложении. Мы дали ему один атрибут, snack, к которому теперь мы можем получить доступ с любой страницы или компонента как this. $ Store.state.snackbar.snack.

Если вы хотите изменить состояние хранилища Vuex, вы не редактируете существующее состояние, вы фиксируете новое состояние сверху. Это означает создание новой копии объекта состояния, которая затем становится копией в this. $ Store.state . Есть много причин, по которым Vuex делает что-то таким образом (одна особенно интересная - это путешествия во времени - вы можете легко «отменять» изменения в магазине Vuex столько раз, сколько захотите).

Чтобы зафиксировать новое состояние, нужно написать мутацию. Мутации - это методы, которым в качестве первого параметра передается новая копия существующего состояния, а затем другие параметры по вашему усмотрению. Все, что вам нужно сделать в вашем методе мутации, - это изменить этот новый объект state, а затем Vuex зафиксирует новое состояние в хранилище, когда метод завершится. Здесь у нас есть простая мутация setSnack, которая просто устанавливает атрибут snack перед переданным параметром.

4. Страница для тестирования магазина.

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

Создайте новый файл pages / snacktest.vue (и, возможно, поместите на него ссылку на боковой панели):

Это действительно простая форма, которая вызывает метод snackTime при нажатии кнопки.

Есть два способа вызвать мутации в вашем магазине. Вы можете вызвать их напрямую, например: this. $ Store.commit ('snackbar / setSnack', 'some message'), или вы можете использовать помощник Vuex mapMutations для преобразовать их в методы в вашем текущем компоненте, как мы это делаем в приведенном выше примере.

После того, как мы установили закуску, мы просим маршрутизатор направить пользователя обратно на домашнюю страницу. Это просто для того, чтобы мы могли видеть, что магазин не зависит от загрузки страниц.

Откройте Vue devtools, переключитесь на вкладку Vuex и посмотрите, что происходит с магазином, когда вы заполняете форму и отправляете ее:

Вы можете увидеть мутацию snackbar / setSnack, появляющуюся в истории Vuex, а затем с правой стороны вы можете увидеть новое состояние магазина Vuex, содержащее ваше новое значение закуски.

5. Скрепляем компонент и храним вместе.

OK! Осталось только соединить эти две части вместе.

Мы собираемся сделать так, чтобы компонент Snackbar.vue следил за изменениями атрибута snackbar.snack в магазине, используя метод Vuex watch. Когда переменная изменяется на что-то другое, кроме пустой строки, мы копируем ее в собственную переменную компонента и показываем панель закусок. Наконец, мы установим копию в хранилище обратно на пустую строку: это так, чтобы, если нам нужно отправить одно и то же сообщение несколько раз подряд, атрибут все равно изменится, и этот код все равно сработает.

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

И это должно быть все, что вам нужно! Вернитесь на страницу закусок и попробуйте снова нажать кнопку. На этот раз вы должны увидеть всплывающее сообщение на панели закусок, которое будет сохраняться при переходе страницы, а хранилище Vuex снова изменится на пустую строку, готовую к отправке другого сообщения.

Что дальше?

Теперь у вас есть глобальная закусочная, и вы можете отправлять на нее сообщения из любого места, используя мутацию snackbar / setSnack, как мы это делали на странице закусок.

Это очень простое введение в управление глобальным состоянием в приложении Vue / Nuxt с использованием Vuex, но, очевидно, это может быть намного сложнее, чем это! Есть также функции Vuex, которые мы здесь не рассматривали, например, написание пользовательских геттеров. Документация Vuex очень хороша, так что прочтите!

Не стесняйтесь клонировать репо для этого проекта и поэкспериментировать с ним сами.

Если эта статья оказалась полезной, поделитесь ею, хлопните мне в ладоши или расскажите, как у вас дела, в комментариях.