Подводя итог, в этом уроке я хочу показать вам, как создать классное приложение Pokédex с помощью Vue. В предыдущей части этого руководства я писал о первоначальной настройке Vue CLI для приложения Pokédex.

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

В папке src происходит вся магия Vue. Теперь создадим страницы. 👷

Страницы и маршрутизация

Мы хотим создать две страницы:

  • Страница, на которой можно выбрать покемона из списка
  • Страница, на которой вы можете найти информацию о ваших любимых покемонах

Сначала мы хотим убедиться, что маршрутизация работает нормально. В App.vue, корневом элементе приложения Vue (он будет отображаться перед вашими пользовательскими элементами Vue), мы должны проверить, содержит ли он <router-view/> все страницы и их компоненты, которые будут отображаться в этом теге. .

Фактически, замените содержимое следующим:

<template>
<div>
<router-view />
</div>
</template>

Затем проверьте, совпадает ли файл main.js со следующим:

Создайте папку с именем pages в папке src и добавьте файл с именем home.vue. Поместите в него следующий код:

После этого создайте новый файл с именем favorites.vue со следующим содержимым:

Как видите, файл Vue состоит из трех частей:

  • шаблон
  • сценарий
  • стиль

Шаблон похож на HTML, но имеет дополнительные функции Vue, которые Vue преобразует в HTML в DOM. В скрипте указывается логика для конкретного экземпляра Vue. В стиле вы можете определить CSS или препроцессор CSS, если он настроен в вашем проекте.

Полезно знать, что вам не нужно использовать шаблон, сценарий и стиль. Вы можете опустить стиль, если вам не нужны какие-либо пользовательские стили для экземпляра Vue. Вы даже можете опустить часть шаблона, но тогда для этого экземпляра ничего не будет показано. Часть скрипта также можно опустить, если компоненту не нужны данные или логика.

Теперь нам нужно настроить маршрутизацию в router.js. Добавьте страницы как импорт и добавьте их в маршруты как компоненты.

Если вы еще этого не сделали, перейдите в свой терминал и выполните команду

npm run serve

Если вы перейдете на свой localhost:8080 сейчас, вы увидите «Домашнюю страницу» в стиле пиксельного шрифта вместе с логотипом Pokémon. Вы даже можете перейти на localhost:8080/favorites, и вы увидите страницу с заголовком «Ваш любимый покемон» и кнопку «Назад», которую вы можете использовать, чтобы вернуться на домашнюю страницу.

Прекрасная работа! 🎉

Вы можете оставить папку view как есть или удалить ее. Мы не будем использовать его для нашего покедекса.

Государственный менеджер

Как вы могли видеть в home.vue, мы вызвали pokéAPI в хуке created с выборкой внутри getPokemonData(). created — один из хуков жизненного цикла Vue. Однако мы никуда не сохраняем данные покемонов. Мы должны сохранить его в хранилище данных. Мы будем использовать Vuex.

Чтобы не усложнять этот урок, я лишь кратко расскажу о Vuex.

Для нашего приложения мы хотим, чтобы несколько компонентов могли иметь доступ к одним и тем же данным. Мы храним эти данные в хранилище, один объект которого называется state. Состояние может быть заполнено и изменено mutations. Только эти мутации имеют прямой доступ к состоянию. Вы не можете запускать мутации напрямую, это нужно делать с помощью actions.Главной причиной этого является удобство сопровождения кода в больших приложениях. Действия могут содержать бизнес-логику и могут быть асинхронными, но когда они вызывают мутации (они могут вызывать несколько мутаций), у мутации есть только одна задача — изменить состояние.

Измените содержимое state.js на следующее:

Итак, у нас есть два свойства в объекте State: statePokemonDataList и stateFavoritePokemonList. Ими можно напрямую манипулировать с помощью мутаций, вызываемых действиями.

Теперь нам нужно обновить наш Pages, сопоставив свойства из состояния, чтобы сделать данные доступными на странице. Затем мы также сопоставим действия с используемыми методами на странице, чтобы мы могли инициировать действие, когда данные в хранилище необходимо изменить. Для этого нам нужны mapState и mapActions из библиотеки vuex.

Теперь я бы порекомендовал вам использовать плагин devtools Vue.js для Firefox или Chrome, чтобы вы могли видеть, что данные о покемонах, полученные из pokéAPI, хранятся в состоянии.

Все идет нормально! 😁 Теперь нам нужно создать компоненты для страниц. Это будет объяснено в Часть 3 этого руководства.