Добро пожаловать в создание веб-приложений с помощью Vue.js. Если вы пропустили первую часть этой серии, нажмите здесь.
Судя по снимку экрана, вы заметите, что приложение теперь выглядит стильно. В дополнение к этому я также добавил функцию поиска по типу (исполнитель, альбом и трек), а также пейджинг. Хотя функциональные изменения незначительны, я буду использовать их, чтобы продемонстрировать, как vue/vuex может поддерживать синхронизацию различных частей пользовательского интерфейса.
У этого приложения по-прежнему есть одна основная задача — получение и отображение информации. Теперь его работа немного усложнилась. Самый простой способ проиллюстрировать это — посмотреть на функцию, которая извлекает данные.
API теперь принимает несколько входных данных, поступающих из пользовательского интерфейса. Поэтому, когда пользователь нажимает кнопку перехода на следующую страницу, что-то должно отслеживать введенную пользователем строку запроса, а также тип, по которому он осуществляет поиск. Давайте посмотрим на компонент пейджера, чтобы увидеть, как он это делает.
Оказывается, компонент пейджера не отслеживает эту информацию! Здесь происходит то, что пейджер запрашивает у vuex свойства из разных частей своего хранилища. Нажатие следующей кнопки привязано к свойству NEXT_PAGE, которое сопоставляется с действиями, зарегистрированными в хранилище vuex. Итак, давайте посмотрим, что делает действие NEXT_PAGE.
Вот где вещи начинают собираться вместе. Когда пейджер отправляет действие NEXT_PAGE, свойство страницы состояния увеличивается. Затем вызывается вспомогательная функция queryApi. Глядя на функцию queryApi, вы заметите, что она получает всю эту информацию из состояния. Если действие должно привести к новому запросу, этому действию просто нужно зафиксировать свое изменение в состоянии, а затем вызвать queryApi, который теперь имеет все последние параметры.
Результатом всей этой настройки в первой части этой серии является чистый читаемый код, даже если приложение становится все сложнее. Логика приложения отделена от уровня представления, что позволяет легко определить, как работает каждая часть, а также отлаживать/расширять/поддерживать эту функциональность.
Основываясь на своем опыте, я думаю, что vue в профессиональной среде обеспечит отличный опыт разработчика. Vue был гибким, и его простота использования справедлива для его вспомогательных библиотек (vue-router будет добавлен в следующий раз).
Я добавил это приложение на свой гитхаб, вы можете найти исходный код здесь и ознакомиться с самим приложением здесь. Репозиторий будет обновляться по мере добавления функций и изучения новых вещей. Я надеюсь, что код полностью отвечает на все, что я здесь не рассмотрел. Просматривая код, вы можете заметить, что я применяю разные подходы к схожим задачам, это сделано для того, чтобы продемонстрировать разные способы выполнения действий в vue (и это помогает мне вспомнить, как я могу что-то делать).
На этом пока все, не забудьте поделиться своими комментариями, критикой и предложениями со мной здесь или в твиттере Frank A Wilkerson и загляните на мой youtube для получения дополнительной информации для разработчиков.
P.S. Спасибо всем, кто читал, делился, ретвитнул, проголосовал и прокомментировал первую статью. Это действительно мотивировало меня продолжать двигаться вперед с этой серией.
