Главная страница » Vue.js в действии

Vue.js в действии

Book Cover: Vue.js в действии

Купить:

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

Excerpt:

Для чего нам Vuex

Библиотека Vuex управляет состоянием. Она хранит его централизовано, что облегчает обращение к нему любых компонентов. Состояние — это информация или данные, которые поддерживают приложение. Это важно, поскольку нам необходим надежный и понятный механизм для работы с этой информацией.

Читать далее

Если у вас уже есть опыт работы с другими фреймворками для создания одностраничных приложений, некоторые из этих концепций могут показаться знакомыми. Например, React использует похожую систему управления состоянием под названием Redux. Vuex и Redux созданы под влиянием проекта Flux. Это архитектура, предложенная компанией Facebook, которая призвана упростить построение клиентских веб-приложений. Она способствует движению данных в одном направлении: от действий к диспетчеру, затем к хранилищу и в конце — к представлению. Такой подход позволяет отделить состояние от остальной части приложения и поощряет синхронные обновления. Больше о Flux можно узнать из официальной документации на странице facebook.github.io/flux/docs/overview.html.

Vuex работает по тому же принципу, помогая изменять состояние предсказуемо и синхронно. Разработчикам не нужно беспокоиться о последствиях обновления состояния синхронными и асинхронными функциями. Представьте, что мы взаимодействуем с серверным API, который возвращает данные в формате JSON. Что произойдет, если в тот же момент эти данные будут модифицированы сторонней библиотекой? Мы не хотим получить непредсказуемый результат. Vuex помогает избежать подобных ситуаций, исключая любые асинхронные изменения.
Вам, наверное, интересно, зачем нам вообще нужна библиотека Vuex. В конце концов, Vue.js позволяет передавать информацию в компоненты. Как вы знаете из предыдущих глав, для этого предназначены входные параметры и пользовательские события. Мы даже могли бы создать собственную шину событий для передачи данных и межкомпонентного взаимодействия. Пример такого механизма представлен на рис. 10.1.

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

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

Посмотрим, как это реализуется с помощью Vuex. На рис. 10.2 видно, что компонент EditBio является дочерним по отношению к панели администратора. Ему нужен доступ к информации о пользователе, чтобы он мог ее обновить. Работая с Vuex, мы можем обратиться к центральному хранилищу, изменить данные и сохранить изменения непосредственно из компонента EditBio. Это намного лучше, чем передавать информацию из корневого экземпляра Vue.js в компонент Admin, а затем в EditBio с помощью входных параметров. Нам было бы сложно уследить за данными, размещенными в разных местах.

Свернуть

Купить:

Добавить комментарий