Vue 3 не за горами, и я создавал некоторые приложения из репозитория app-ideas GitHub для практики. Если вы не знаете об этом, этот репозиторий представляет собой собрание идей для создания приложения и отработки своих навыков. Каждое приложение поставляется с описанием, списком пользовательских историй и бонусных целей, а также всеми ресурсами, которые вам понадобятся для достижения вашей цели. У него даже есть пример приложения, поэтому, если вы в какой-то момент застрянете, вы можете проверить, как это делается. В этой статье мы начнем создавать приложение для рецептов.
До конца апреля лучший способ опробовать одну из самых популярных новых функций - API композиции - было использовать ее в проекте Vue 2, выполнив следующую команду vue-cli в уже созданном проекте. В Интернете можно найти множество статей о том, как это сделать, например, эту:
Если вы не знаете, что такое API композиции, возможно, вам стоит прочитать об этом документацию команды Vue, прежде чем мы начнем. Как всегда, документация очень четкая и лаконичная:
Но 20 апреля Evan You представил Vite, инструмент для создания шаблона приложения Vue 3, обслуживания его для разработчиков без связывания и объединения его для производства с помощью накопительного пакета. Я начал использовать его в первый же день, и должен сказать, я действительно впечатлен тем, чего они уже достигли. Сервер запускается немедленно, поскольку ему не нужно связывать приложение (компоненты компилируются на лету и передаются в браузер как собственные модули es), и он даже получил замену горячего модуля, поэтому всякий раз, когда вы меняете свой код, они re мгновенно отражается в браузере. Вы можете проверить их репозиторий ниже, чтобы прочитать документацию и начать кодирование прямо сейчас:
Хватит говорить, пора запачкать руки и написать код.
Начиная
Чтобы запустить наш проект Vite, все, что нам нужно, это выполнить следующую команду:
// you can use npm/npx npx create-vite-app vite-recipe-book cd vite-recipe-book npm install npm run dev // or yarn yarn create vite-app vite-recipe-book cd vite-recipe-book yarn yarn dev
Откройте браузер, укажите адрес http: // localhost: 3000, и мы готовы к работе.
Маршрутизация
Наше приложение будет состоять из простой книги рецептов. У нас есть две части: ингредиенты и рецепты. Как вы знаете, рецепт состоит из множества ингредиентов.
Поскольку у нас есть две отдельные части, лучший способ переключаться между ними - использовать vue-router, официальное решение для маршрутизации vue.
Для Vue 3 мы можем использовать версию Vue-router 4. Он все еще находится на стадии альфа-тестирования, но, поскольку мы не создаем производственное приложение, все в порядке. Репозиторий этой следующей версии указан ниже:
Давайте установим последнюю версию на момент написания этой статьи, v4.0.0-alpha.11, используя следующие команды:
npm i --save [email protected] # or yarn add [email protected]
Нам нужно создать наш файл router.js. Она немного отличается от предыдущей версии. Мы создаем объект истории, массив маршрутов и используем их для создания нашего маршрутизатора.
Мы еще не создали импортируемые компоненты, мы сделаем это вперед.
Чтобы использовать наш только что созданный маршрутизатор, мы должны внести некоторые изменения в файл main.js, импортировав нашу маршрутизацию и указав приложению использовать ее:
Другой файл, который нам нужно изменить, - это App.vue, чтобы включить компонент router-view, чтобы текущий маршрутизатор был отрисован:
Вот и все. Теперь давайте создадим наши компоненты.
Поскольку у нас есть маршруты, первое, что нужно создать, это…
Компонент навигации
Наш простой компонент навигации будет списком из 3 маршрутов, которые мы создали ранее. Для этого мы будем использовать API композиции и хук useRouter, предоставляемый vue-router. Хотя нам не нужен API композиции для таких простых компонентов, мы будем использовать его повсюду на практике. Так что просто создайте файл Nav.vue в папке компонентов и напишите код:
Как вы видели, из метода настройки мы возвращаем только те части, которые будут использоваться снаружи. Объект router и вычисленное значение activeRoute используются только внутри метода настройки, поэтому нам не нужно их возвращать. Значение activeRoute создается как вычисленное, поэтому оно автоматически обновляется при изменении объекта маршрутизатора.
Я не нашел какой-либо документации по хуку useRouter, но если вы используете VSCode (я надеюсь, что да), вы можете управлять им и щелкать по нему, чтобы просмотреть его объявление. Как вы увидите, в нем есть множество экспортируемых методов и свойств, включая программную навигацию (push, back, replace и т. Д.). Надеюсь, это поможет вам понять, что мы сделали, чтобы проверить текущий маршрут.
Теперь все, что нам нужно сделать, это включить компонент Nav в App.vue.
Одно хорошее изменение, которое вы здесь заметите, заключается в том, что во Vue 3 больше нет ограничения на один корневой элемент (молодец команда Vue). Следующим шагом будет создание простейших компонентов…
Компонент ингредиентов
Наш компонент ингредиентов будет состоять из поля ввода текста фильтра, поля ввода текста и кнопки «Добавить» для добавления новых ингредиентов, а также таблицы с кнопками удаления и обновления. Когда вы нажмете кнопку удаления, ингредиент исчезнет, а когда вы нажмете «Обновить», элемент будет удален из списка и введен в текстовый ввод, чтобы пользователь мог изменить его и снова вставить. Поскольку у нас есть несколько реактивных значений, которые необходимо использовать в шаблоне, мы будем использовать реактивный метод, чтобы сгруппировать их в один объект. Мы также можем использовать метод ref, но тогда нам придется создавать их по очереди. Еще одна вещь, которая изменится, - это то, что нам придется использовать метод .value ref для доступа к его текущему значению внутри метода настройки. В реактивном режиме этого делать не нужно.
Другие вещи, которые нам нужно создать в методе настройки, - это вычисленный метод, чтобы заставить наш фильтр работать, а также методы добавления, удаления и обновления. Легко и просто, правда? Итак, давайте создадим файл Ingredients.vue в нашей папке компонентов и начнем кодирование:
Как вы заметили, мы изменяем массив ингредиентов неизменным образом, всегда присваивая ему новый массив вместо изменения текущего значения. Это более безопасный и всегда рекомендуемый способ работы с массивами и объектами, чтобы обеспечить работу реактивности;
Если вы подумаете о следующем компоненте, который мы должны создать, «Рецепты», возможно, вы поймете, что у нас проблема с компонентом «Ингредиенты»: состояние является локальным, а рецепты будут состоять из ингредиентов. Так что нам нужно придумать способ разделить состояние между ними тоже. Традиционный способ решения этой проблемы - использовать Vuex или, возможно, компонент высокого порядка, который контролирует состояние и передает его в качестве реквизита обоим компонентам, но, возможно, мы сможем решить это способом Vue 3, используя API композиции. Итак, давайте продолжим и создадим…
Магазин
Чтобы создать наше хранилище, которое будет отвечать за управление и совместное использование состояния приложения, мы воспользуемся реактивными и вычисляемыми методами нового API композиции, чтобы создать ловушку, которая будет возвращать текущее состояние и методы, используемые для его обновления. Затем этот хук будет использован внутри метода настройки компонента, как мы это сделали с хуком useRouter, и все будет хорошо.
В этом примере мы будем управлять обоими списками (ингредиентами и рецептами) в одном реактивном объекте. Вам решать, как это сделать, или, возможно, создать отдельные файлы для каждого из них. Хватит говорить, давайте код:
Как вы видели из кода, мы используем вычисляемый метод внутри функции useStore, поэтому наши массивы ингредиентов и рецептов не могут быть обновлены извне. В вычисляемом значении рецептов мы сопоставляем массив ингредиентов с его объектом ингредиента. Таким образом, мы можем сохранить только идентификатор ингредиента и получить идентификатор и имя в нашем списке рецептов. Затем вычисленные массивы сортируются по имени с помощью методов sort и localeCompare.
Мы добавили метод (id) для генерации уникального идентификатора для каждого ингредиента и рецепта и создали свойство name в методе addIngredient, чтобы сделать ингредиенты массивом объектов. Еще один важный момент - метод removeIngredient проверяет, включен ли ингредиент в рецепт, перед его удалением. Это важно, чтобы наши рецепты были в безопасности.
Еще одним преимуществом является использование метода watch для сохранения постоянного состояния хранилища в localStorage браузера пользователя и первоначальная конфигурация состояния в виде сохраненных данных localStorage или объекта с пустыми массивами ингредиентов и рецептов. Такой подход можно использовать и для сохранения данных в удаленном API.
Думаю, теперь мы можем двигаться дальше и ...
Компонент Refactor Ingredients
Теперь, когда наш магазин готов, пришло время реорганизовать компонент-ингредиент, чтобы использовать его. Этого можно легко достичь, заменив массив data.ingredients массивом ингредиентов нашего магазина и переписав методы добавления, обновления и удаления, чтобы использовать addIngredient и removeIngredient магазина. Еще мы изменим ссылку на ингридиент. Имя, а не просто на ингредиент, поскольку теперь это объект со свойствами id и name. Давай сделаем это:
Все работает нормально, теперь пора переходить к более сложному компоненту.
Компонент "Рецепты"
Наш компонент рецептов будет состоять из формы, в которую вы можете добавить рецепт, введя заголовок и выбрав ингредиенты в поле выбора. Эти ингредиенты будут в списке с кнопкой удаления. Для простоты мы не будем указывать количество ингредиентов в нашем рецепте, но сделаем это в качестве упражнения. Помимо этой формы, у нас будет ввод фильтра и список рецептов, которые будут работать так же, как в компоненте ингредиенты, но с добавлением кнопки просмотра для предварительного просмотра рецепта и его ингредиентов прямо под таблицей. Это не намного сложнее того, что он уже сделал с ингредиентами. Время писать код:
Все работает хорошо. но с очень некрасивым видом. В качестве домашнего задания вы можете добавить стили и реализовать функции, описанные в readme приложения для рецептов.
Я оставлю последний код в моем GitHub, чтобы вам было с чего начать.
Заключение
Как мы видим, API композиции очень полезен и прост в использовании. С его помощью мы можем реализовать функции, подобные перехватчикам реакции, для обмена данными и логикой между нашими компонентами, помимо прочего.
Я надеюсь, что вам всем понравилась статья и, возможно, вы узнали что-то полезное, что поможет вам при переходе с Vue 2 на Vue 3. И если это правда, оставьте пару хлопков.
Увидимся в следующей статье.
