Marvel API + Vuepack (Vue + Vuex)

Начало работы с вызовами Vue, Vuex и API

TL; DR - Эта статья покажет вам, как быстро начать использовать Vue и Vuex с Marvel API.

Мы создадим простое приложение, которое будет искать персонажей в базе данных Marvel, а затем отображать результаты.

Что такое Vue?

Vue (произносится как / vjuː /, как вид) - это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других монолитных фреймворков, Vue разработан с нуля для постепенного внедрения. Основная библиотека ориентирована только на слой представления, и ее легко выбрать и интегрировать с другими библиотеками или существующими проектами. (Https://vuejs.org/v2/guide/)

Что такое Vuex?

Vuex - это шаблон + библиотека управления состоянием для приложений Vue.js. Он служит централизованным хранилищем для всех компонентов в приложении с правилами, гарантирующими, что состояние может изменяться только предсказуемым образом. (Https://vuex.vuejs.org/en/intro.html)

Что такое VuePack?

Vuepack - это стартовый комплект, который использует Vue 2, Vuex, Vue-router и Webpack 2. По сути, он загружает и настраивает ваш проект для вас с использованием этих технологий.

Начиная

Приложение, которое мы реализуем, будет искать в базе данных Marvel (через API) символы на основе пользовательского ввода, а затем отображать результаты.

Репозиторий GitHub для этой демонстрации

Marvel API

Во-первых, вам понадобится ключ API Marvel, поэтому перейдите на Портал разработчиков Marvel и зарегистрируйтесь для получения ключа API.

Для вызовов API вы можете либо напрямую вызвать API из http://gateway.marvel.com/v1/public, либо использовать Сервер узла в качестве прокси. Однако, если вы вызываете его напрямую, вам придется иметь дело с Cross-Origin Resource Sharing (CORS). В этой статье я буду использовать свой собственный Marvel Power Levels API, написанный на Node и Express.

VuePack

Мы будем создавать наш проект Vue.js с VuePack, используя vue-cli. Vue-cli позволяет вам использовать различные шаблоны с открытым исходным кодом, которые позволят вам начать работу без каких-либо проблем с настройками.

$ npm install -g vue-cli
$ vue init egoist/vuepack new-project
$ cd new-project
$ npm install

Используйте параметры по умолчанию для строительных лесов (vue init):

? Do you want to use ESLint? Yes
? Generate components in JSX format? No
? Support Electron? No
? Add testcafe to run integration tests? No

Axios для вызовов API

Мы будем использовать Axios для наших вызовов API.

$ npm install axios --save

Семантический интерфейс

Наконец, мы будем использовать Semantic UI в качестве нашего CSS-фреймворка.

Внутри build/index.html добавьте <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">

Начать разработку

Чтобы запустить приложение и начать разработку:

$ npm run dev

Откройте в браузере localhost:4000. Теперь вы должны увидеть счетчик по умолчанию, встроенный в приложение.

Внутри store/index.js мы удалим код хранилища счетчиков по умолчанию и настроим наш собственный магазин для персонажей Marvel.

Замените код следующим:

В нашем магазине есть 4 разные части, из которых состоит магазин.

Штат

Состояние относится к объекту, в котором мы определяем данные для структуры нашего приложения. Эти данные должны использоваться во всех наших компонентах, также известных как «единый источник истины».

const state = {
  data: []
}

Для нашего приложения у нас будет только одно состояние - данные. data будет содержать наши символьные данные, возвращаемые Marvel API.

Мутации

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

const mutations = {
  RECEIVE_CHARACTERS (state, { characters }) {
    state.data = characters
  }
}

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

Действия

Действия - это то место, где мы пишем функции, которые будут фиксировать изменения в магазине. Вместо того, чтобы напрямую изменять состояние хранилища, действия совершают изменения, которые затем обновляют состояние. Действия вызываются с помощью диспетчерского вызова, например: this.$store.dispatch('FETCH_CHARACTERS')

const actions = {
  async FETCH_CHARACTERS ({ commit }, name) {
    const url = `http://localhost:8080/api/characters?limit=12&name=${name}`
    const { data } = await axios.get(url)
    commit('RECEIVE_CHARACTERS', { characters: data.results })
  }
}

Кроме того, действия могут быть асинхронными, поэтому мы будем размещать здесь наши вызовы API.

В нашем действии FETCH_CHARACTERS мы выполняем асинхронный вызов API с помощью Axios. Затем, когда асинхронный вызов завершен, мы выполняем фиксацию мутации RECEIVE_CHARACTERS с результатами данных API.

Получатели

Геттеры - это вспомогательные функции, которые извлекают данные из нашего состояния.

const getters = {
  characters: state => {
    return state.data.map(data => {
      return {
        name: data.name,
        url: data.urls[1] ? data.urls[1].url : data.urls[0].url,
        image: `${data.thumbnail.path}.${data.thumbnail.extension}`,
        description: data.description === '' ? 'No description listed for this character.' : data.description
      }
    })
  }
}

В нашем приложении мы используем геттер для получения вычисленных данных и возврата упрощенного объекта, который мы можем использовать. Причина использования здесь геттера заключается в том, что иногда API возвращает данные, которые нам не нужны, или данные, которые нам действительно нужны, глубоко вложены.

Особое упоминание: модули

Мы не используем модули внутри нашего приложения, потому что они лучше подходят для больших приложений с несколькими состояниями.

Благодаря использованию единого дерева состояний все состояния нашего приложения содержатся внутри одного большого объекта. Однако по мере роста масштабов нашего приложения магазин может сильно раздуться.

Чтобы помочь с этим, Vuex позволяет нам разделить наш магазин на модули. Каждый модуль может содержать свое собственное состояние, мутации, действия, геттеры и даже вложенные модули - это фрактал до самого низа. (Https://vuex.vuejs.org/en/modules.html)

Создание компонентов

Теперь, когда мы создали наш магазин и понимаем основные концепции магазина Vuex, теперь мы можем создавать компоненты, которые взаимодействуют с магазином.

Компонент SearchCharacterForm

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

Внутри client/components создайте новый файл с именем SearchCharacterForm.vue.

Добавьте этот код в SearchCharacterForm.vue:

Главное, на что следует обратить внимание, - это данные и методы.

Данные используются для определения свойств, которые будут добавлены в систему реактивности Vue. Это означает, что при изменении значения свойства представление «отреагирует», обновившись, чтобы соответствовать новым значениям, и наоборот. Также известна как двусторонняя привязка. Мы будем использовать свойство name, чтобы сообщить нашему действию, какое имя персонажа Marvel нужно получить.

Методы используются для определения функций, которые будут использоваться для любых обработчиков событий внутри шаблона. В нашем приложении мы создали метод handleSearch, который отправляет действие для выборки символов. Затем действие выборки символов обновит состояние данных магазина результатами API.

Компонент CharactersList

Чтобы отобразить результаты из текстового поля поиска, нам нужно будет создать компонент CharactersList. Этот компонент будет содержать наш шаблон и логику для отображения данных символов из нашего магазина.

Внутри client/components создайте новый файл с именем CharactersList.vue.

Добавьте этот код в CharactersList.vue:

Компонент будет отображать и отображать результаты поиска из состояния нашего магазина. В этом компоненте мы используем геттер characters, который мы создали ранее в нашем файле магазина. Использование геттера позволяет нам извлекать и использовать наши данные состояния чистым и минимальным способом вместо того, чтобы выполнять множество манипуляций с данными, чтобы получить то, что мы хотим.

Кроме того, мы получаем доступ к нашему геттеру символов как к вычисляемому свойству, потому что мы хотим, чтобы наш компонент всегда получал текущее состояние после его изменения. Поэтому, когда пользователь ищет другого персонажа Marvel, список будет обновлен, потому что наш компонент CharactersList знает, как использовать последние и текущие данные о состоянии.

Отображение компонентов

Чтобы закончить, нам нужно добавить эти компоненты в наше домашнее представление.

Внутри views/Home.vue замените код на:

Заключение

Пройдя весь поток, символьный поиск отправит действие, которое вызывает API, и совершает мутацию . Затем мутация обновляет данные состояния, которые затем отображаются с помощью компонента CharactersList, в котором используются символы getter.

Теперь, если вы запустите приложение с npm run dev, вы должны увидеть форму поиска. После этого поиск действительного персонажа Marvel должен отобразить список результатов.