Может ли ваш выбор котят показать, где вы живете?

Хранение данных в централизованном хранилище имеет решающее значение для сложных интерфейсных приложений. В противном случае данные распространяются повсюду и должны передаваться между компонентами.

Это особенно важно, если вы используете такие фреймворки, как React, Angular или Vue.js. Эти три фреймворка делят приложения на компоненты, и вам необходимо передавать данные между ними, если вы хотите обмениваться данными в специальной манере.

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

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

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

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

Начиная

Для начала нам нужно установить Vue CLI, чтобы упростить создание нашего приложения. Он содержит сервер разработки и сценарии для генерации стандартного кода.

Запустите npm install -g @vue/cli, чтобы установить его глобально.

Затем мы запускаем vue create geokittyjs, чтобы сформировать наше приложение.

После этого мы можем запустить сервер разработки для отображения нашего приложения, запустив npm run serve. Он автоматически обновит браузер по мере того, как мы обновляем наш код.

Мы устанавливаем наши вспомогательные библиотеки, запустив npm i yuex vue-material vue-router superagent.

  • Vue Material делает наше приложение красивым.
  • Vuex - это библиотека управления состоянием.
  • Vue Router - это библиотека маршрутизации для маршрутизации URL-адресов к компонентам нашей страницы.
  • SuperAgent - это HTTP-клиент, который мы будем использовать.

Кодирование

Теперь мы готовы писать код.

Сначала мы добавляем Значки материалов в index.html, чтобы получить красивые значки, например:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">

Затем мы пишем логическую часть приложения. Начнем с некоторых важных констант. Мы поместили их все в src/constants.js для облегчения доступа.

Там добавьте:

Они нам понадобятся позже для наших вызовов API.

Затем мы создаем хранилище данных для хранения наших данных в src/store/store.js:

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

Теперь мы можем создавать наши компоненты. Мы создадим страницы, которые вы увидите.

В src/components добавьте файл с именем City.vue и введите следующий код:

Затем создайте файл с именем Continent.vue и добавьте:

Затем создайте файл с именем Country.vue и добавьте:

Создайте файл с именем Disappoint.vue и добавьте:

Затем создайте файл с именем Home.vue и:

Логика кода такова - мы получаем ваш публичный IP-адрес из первого вызова API, а затем он может получить данные о вашем местоположении.

В шаблоне мы проверяем состояние, которое возвращается в логике ниже, в свойстве computed:

count() {
  return store.state.count;
}

Всякий раз, когда состояние обновляется, функция count будет возвращать последнее значение. Все, что обновляется автоматически, вы можете поместить в свойство computed.

В Region.vue, который мы создаем, добавляем:

Остальное создается аналогичным образом.

Мы создаем WhereCity.vue, WhereContinent.vue, WhereCountry.vue, WhereRegion.vue и Win.vue.

В WhereCIty.vue мы добавляем:

В WhereContinent.vue мы добавляем:

В WhereCountry.vue мы добавляем:

В WhereRegion.vue мы добавляем:

И, наконец, в Win.vue мы добавляем:

Обратите внимание, что в каждом файле есть вызов store.commit. Здесь состояние обновляется.

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

Затем, в src/router/index.js, мы регистрируем наши компоненты и библиотеки, чтобы мы могли использовать их в других частях наших приложений, например:

В итоге получаем что-то вроде этого: