348  /  378

Внешнее хранение данных Vuex

Просмотров: 195 (Статистика ведётся с 06.02.2017)
Анна Кокина
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

Внешнее хранение данных Vuex

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

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

Vuex реализует архитектурный подход Flux Flux-архитектура — архитектурный подход или набор шаблонов
программирования для построения пользовательского интерфейса
веб-приложений, сочетающийся с реактивным программированием
и построенный на однонаправленных потоках данных.

Согласно замыслу создателей и несмотря на то, что Facebook
предоставил реализацию Flux в дополнение к React, Flux не является
ещё одним веб-фреймворком, а является архитектурным решением.

Подробнее...
, построенный на однонаправленном потоке данных.

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

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

Подробнее...
или посмотрев видео.


Пример использования

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

Данный компонент состоит из списка всех смайлов и галерей. Эти данные больше не планируется нигде использовать - значит, хранить их нужно внутри компонента Vue (выносить их в отдельное хранилище Vuex избыточно).

Теперь перейдем к другому примеру - мессенджер.

Мессенджер состоит из нескольких автономных компонентов:

  • список чатов (зеленый)
  • панель чата (желтый)
  • список сообщения (синий)

В каждом из них есть отображение пользователя (красные блоки), и тут возникают несколько вопросов:

  • как получить данные в самом глубоком компоненте?
  • как сделать, чтобы после загрузки аватара в одном блоке он изменился во всех?
  • если разные компоненты умеют получать новые данные, то как их синхронизировать между собой?
  • какой компонент главный?

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

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

Примечание: Для использования возможностей "Машины времени" и импорта/экспорта слепков состояний необходимо установить специальное расширение для Google Chrome - Vue DevTools.





0
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии