Если вы только сейчас настраиваетесь, обязательно прочтите Часть 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 этой серии!