Передача данных на много уровней Vue компонентов

Эта статья является частью 7 из 7 в серии Vue. Повторное использование кода

Чтобы в коде проще было ориентироваться и поддерживать его мы разделяем его на небольшие части, которые легко укладываются в голове и на экране. Во Vue, в основном, такие части будут представлены компонентами. Мы дробим интерфейс пользователя на ряд компонентов, которые используют друг-друга образуя дерево (иерархию).

Читать далее

Есть ли наследование во Vue.js

Эта статья является частью 6 из 7 в серии Vue. Повторное использование кода

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

Читать далее

Vue. Продвинутая работа со слотами

Эта статья является частью 5 из 7 в серии Vue. Повторное использование кода

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

Читать далее

Vue 3 expose

Эта статья является частью 4 из 7 в серии Vue. Повторное использование кода

В этой статье будет рассказано про новшество под названием expose появившееся во Vue версии 3.2. Эта возможность будет использована в развитии примера компонента-таблицы на Vue, создание которого описывается в предыдущих статьях.

Читать далее

Таблица на Vue 3. Добавляем Scoped Slots

Эта статья является частью 3 из 7 в серии Vue. Повторное использование кода

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

Читать далее

Таблица на Vue 3. Создание компонента

Эта статья является частью 2 из 7 в серии Vue. Повторное использование кода

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

Читать далее

Vue. Пути улучшения возможностей повторного использования ваших компонентов

Эта статья является частью 1 из 7 в серии Vue. Повторное использование кода

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

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

Читать далее

Vuex или Pinia. Что выбрать?

Сложно представить себе Vue-приложение, которое состоит из 1-2 компонентов. Обычно у нас есть десятки и даже сотни строительных блоков. Компоненты складываются в иерархическую структуру. Основной способ передать какие-либо данные с верхних уровней элементов к нижним – свойства компонентов. Для передачи чего-либо в обратном направлении обычно служат события. Однако, если какие-либо данные необходимо передавать через несколько уровней вложенности, то такой подход будет очень трудоемким. Скорее всего также, часть компонентов на пути передачи данных будут в этом лишь посредниками. То есть они будут получать данные, которые им самим не нужны. И это нарушает принципы SOLID. Такой подход станет еще более обременительным, если данные нужно передавать между соседними ветками иерархии.

Читать далее

VueUse

VueUse – это коллекция утилит для Vue Composition API, которая содержит средства для взаимодействия с различными сенсорами, API состояния, анимацией и другими возможностями браузеров. Помимо этого, также, включает в себя ряд интеграций со сторонними популярными пакетами.

Читать далее

TanStack Query (Vue Query)

При создании сложного приложения на Vue.js на ряде страниц (в ряде компонентов) могут понадобиться общие для части проекта данные. При этом они не настолько общие и часто употребимые, чтобы загружать их сразу при обращении к любой странице. Хорошо бы загрузить эти данные сразу при посещении одной из тех страниц, где они нужны. И далее хранить с возможностью использовать на других страницах без повторной загрузки.

Читать далее

PortalVue – Teleport для Vue шаблонов

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

Представим себе список проблем (issues) как на github и в уголке страницы значок с числом не просмотренных проблем. Когда пользователь заходит в просмотр одной из проблем, то в списке она меняет вид, так как стала прочитанной. При этом и значок с числом должен уменьшить его. И так как это разные компоненты, которые могут быть не вложены один в другой, то встанет вопрос откуда брать данные для обои. “Vuex”, – скажите вы. Но не всегда это будет удобно и верно.

Читать далее