Если вы только сейчас настраиваетесь, обязательно прочтите Часть 1 и Часть 2. Не стесняйтесь просматривать полный исходный код и играть в игру!

В последнее время все говорят обо всех этих Javascript-фреймворках - Angular, React, Vue ... здесь слишком много вариантов. Взявшись за этот проект, я решил просто выбрать один и заняться им. Сначала я услышал о Vue.js в подкасте Does Not Compute. Ведущие, Пол Стро и Шон Вашингтон, высоко оценили это, поэтому я решил проверить это. Я уже изучал Angular и React раньше (недавно проделал некоторую работу с React), и после нескольких минут чтения документации и примеров Vue я влюбился. Он простой, понятный, с очень щадящей кривой обучения, а высокая производительность является приятным бонусом.

Существует несколько способов написания кода Vue, включая традиционные файлы Javascript (.js) с использованием ECMAScript 5 (ES5). Путь, который мы выберем в этом посте, является моим любимым - написание шаблонов Vue (.vue) с использованием ECMAScript6 (ES6). Этот метод позволяет нам записывать наши компоненты в виде отдельных файлов, состоящих из трех основных компонентов - шаблона, сценария и стиля - и предоставляет нам файл, инкапсулирующий все, что нужно нашему компоненту.

Подготовка к работе

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

  • Узел / NPM (мне нравится использовать nvm для установки узла и NPM)
  • Vue-cli *
  • Сервер веб-сокетов из Части 2 этого блога

Изменить: в этом сообщении используется vue-cli 2.5.16. Я бы порекомендовал использовать @vue/cli 3.0 beta. Он значительно улучшен и делает cli очень мощным инструментом.

Начало работы

Изменить (27.03.2019): экосистема Vue постоянно меняется, а vue-cli 3 очень интуитивно понятен и предлагает множество замечательных новых функций для инициализации проекта Vue. Рекомендую ознакомиться с документацией здесь.

Самый быстрый и простой способ запустить наш проект - использовать vue-cli, который позволяет нам включить проект vue «hello world» с использованием одного из множества готовых шаблонов. Я фанат webpack, поэтому мы воспользуемся шаблоном vue-cli webpack.

В вашем терминале выполните следующую команду:

$ vue init webpack [project-name]

Эта команда ответит на несколько вопросов о вашем проекте. Обычно вы можете использовать значения по умолчанию, но для краткости мы ответим «N» на несколько вопросов - используйте ESLint, модульные тесты и тесты e2e. Обычно я рекомендую их использовать, но для этого урока они нам не понадобятся.

Каркас Vue CLI

Взглянув на вывод скаффолда, мы видим, что он создал package.json для NPM, громоздкую папку node_modules, index.html и множество других папок. Пройдемся по созданным им папкам:

  • build - содержит сценарий сборки и модульную конфигурацию веб-пакета, пока мы можем оставить это как есть.
  • config - дополнительные шаблоны конфигурации веб-пакетов для различных сред сборки.
  • src - здесь будет размещаться наш внешний код Vue.js. Он содержит несколько подкаталогов для хранения аспектов экосистемы Vue, таких как компоненты, маршруты и дополнительные ресурсы.
  • статические - папка для хранения статических ресурсов, например изображений и файлов шрифтов.

Не касаясь кода, мы можем запустить приложение Vue с помощью сервера разработки webpack, выполнив следующую команду.

npm run dev

Это запустит сервер разработки с горячей перезагрузкой по адресу http: // localhost: 8080.

Команда, которую мы только что выполнили, не является чем-то вроде магии, это сценарий, предопределенный vue-cli в package.json. NPM позволяет нам писать сценарии или задачи для выполнения назначенных команд. Команда dev просто запускает наш сервер разработки веб-пакетов. Другая команда, которая нас интересует, - это команда build, которая компилирует наш интерфейсный код с помощью webpack в назначенный каталог.

Основы Vue

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

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

Централизованное управление состоянием с Vuex

При работе со сложным приложением Vue с несколькими компонентами довольно часто у компонентов возникает потребность в совместном использовании данных. Без Vuex нам пришлось бы передавать данные как свойства, которые неизменяемы дочерним компонентом. Чтобы изменить данные в родительском компоненте, нам нужно будет $emit событие, содержащее обновленные данные, а также обработать событие из родительского компонента. С небольшим приложением, где нам нужно проделать это один или два раза, это нормально. Но с большим приложением это очень быстро становится беспорядочным. Ничего страшного, Vuex здесь, чтобы помочь вам!

Общее состояние с Vuex

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

  • Состояние - единственный источник достоверной информации о состоянии нашего приложения. Состояние незыблемо.
  • Геттеры - вычисляемое состояние на основе состояния хранилища. Подобно вычисляемым реквизитам.
  • Мутации - единственный верный способ изменить состояние. Мутации нельзя вызывать напрямую, они должны быть активированы вызовом store.commit([mutation]). Мутации должны быть синхронными.
  • Действия - аналогично мутациям, за исключением того, что действия совершают мутации и могут содержать асинхронные операции.

Дополнительные технические подробности о различных аспектах архитектуры управления состоянием Vuex см. В их официальной документации.

Создание магазина

Теперь, когда вы понимаете основные концепции магазина, создать магазин относительно просто. Вместо того, чтобы пытаться объяснить Vuex, используя фактический игровой код с кодовыми именами, мы создадим базовое хранилище, которое будет управлять счетчиком. Это гораздо более комплексно и позволяет мне охватить больше аспектов Vuex.

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

Использование Vuex в компонентах

Теперь, когда наше хранилище настроено, мы захотим использовать это в компоненте Vue для увеличения и сброса счетчика. Для этого мы можем просто получить доступ к нашему глобальному хранилищу через переменную this.$store. Однако это может стать громоздким при попытке получить доступ к нескольким аспектам нашего экземпляра Vuex. К счастью, Vuex предоставляет несколько вспомогательных методов для прикрепления частей из хранилища Vuex к нашим компонентам. Это позволяет нам получить доступ к нашему счетчику, используя this.count, а не this.$store.state.count. Кроме того, он позволяет нам прикреплять только те части из нашего магазина, которые требуются конкретному компоненту. У каждой части Vuex есть помощник, как описано ниже, и каждая из них обычно используется с оператором «распространения» ..., который взрывает возвращаемый объект, позволяя нам по существу объединить его с нашим существующим объектом без каких-либо дополнительных библиотек или утилит.

  • Состояние - mapState в compute блоке компонента.
  • Геттеры - mapGetters в compute блоке компонента.
  • Мутации - mapMutations в methods блоке компонента.
  • Действия - mapActions в блоке methods компонента.

Ниже давайте сравним компонент Counter с помощниками и без них.

Обратите внимание на блоки computed и methods компонента. В приведенном выше примере мы создаем отдельные функции, которые просто возвращают состояние, геттеры, мутации и действия, используя длинную форму, такую ​​как this.$store.state.count. Это добавляет компоненту ненужного раздувания.

Использование помощников стало невероятно простым с помощью оператора распространения, и он позволяет нам использовать элементы Vuex в сочетании с нашими собственными вычисляемыми свойствами и методами, как показано выше. Мы можем импортировать doubleup получатель, а также создать собственное свойство halfCount.

Заключение

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

Обновление 2018/04/24 - Узнайте, как интегрировать веб-сокеты в свой проект с помощью Socket.IO и Vuex, в Части 4 этой серии!

Поддерживать нас

  • Дайте этому посту несколько аплодисментов 👏👏👏👏
  • Оставьте отзыв в комментариях к этому посту
  • Присоединяйтесь к нашему каналу Slack
  • Следуйте за нами в Facebook, Twitter, Reddit.