WTF is Vuex? Руководство для новичков

0

Вступ

Будучи активным разработчиком Vue, я слышал достаточно о Vuex, чтобы заподозрить, что он должен быть важной частью экосистемы Vue, даже если я не знал, чем он был на самом деле.

В конце концов мне стало интересно, поэтому я отправился в документацию с планами быстрого просмотра.

К моему огорчению меня встречали незнакомые термины, такие как state management pattern,
global singleton и source of truth.
Эти термины могут иметь смысл для любого, кто уже знаком с
этой концепцией, но не для меня.

Единственное, что я понял, это то, что Vuex имел какое-то отношение к Flux и Redux.
Я не знал, что это такое, но я подумал, что мне будет проще, если я сначала узнаю о них.

После небольшого исследования и настойчивости концепции моего жаргона, наконец, начали материализоваться в моем сознании. Я вернулся к документации Vuex, и это, наконец, поразило меня … Vuex впечатляющий!

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

1

Понимание проблемы, решаемой Vuex

Понять Vuex будет намного проще, если вы сначала поймете проблему, которую он решает.

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

Миллионы пользователей ежедневно общаются с миллионами других пользователей через ваше приложение. Однако есть жалобы на раздражающую проблему: панель уведомлений будет иногда давать ложные уведомления. Пользователь будет уведомлен о новом непрочитанном сообщении, но когда он его проверяет — это всего лишь сообщение, которое он уже видел.

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

2

Flux

Разработчики Facebook в течение некоторого времени боролись с ошибкой «уведомление зомби». В конце концов они поняли, что это постоянный характер — это больше, чем просто ошибка; она указывала на некоторые основные недостатки в архитектуре приложения.

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

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

Flux — это шаблон, а не библиотека

Вы не можете пойти на Github и скачать Flux. Это паттерн проектировани, такой как MVC. Библиотеки, такие как
Vuex и Redux, реализуют шаблон Flux так же, как другие библиотеки реализуют шаблон MVC.

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

3

1) Single source of truth

Компоненты могут иметь локальные данные, о которых им нужно знать. Например, положение полосы прокрутки в компоненте списка пользователей, вероятно, не представляет интереса для других компонентов.

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

Это одно место называется хранилищем. Компоненты должны считывать данные приложения из этого местоположения и не сохранять свою собственную копию, чтобы предотвратить конфликт или несогласие.

4

2) Read only

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

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

Почему такой подход? Мы минимизируем возможность того, что некоторые случайные компоненты (возможно, в стороннем модуле) неожиданно изменили данные.

5

3) Мутации являются синхронными

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

Но эта способность была бы невозможна, если бы наши мутации работали асинхронно. Мы знали бы, что наши изменения выполнены, но мы не знали бы порядка, в котором наши компоненты совершали их.

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

6

Наконец: что такое Vuex?

На всем этом фоне мы, наконец, можем ответить на этот вопрос.

Vuex — это библиотека, которая поможет вам реализовать архитектуру Flux в вашем приложении Vue. Соблюдая принципы, описанные выше, Vuex сохраняет ваши данные приложения в прозрачном и предсказуемом состоянии, даже когда эти данные распределяются между несколькими компонентами.

Его реализация включает в себя хранилище, настраиваемые мутаторы и автоматическое обновление любых компонентов, которые считывают данные из хранилища.

Он также предоставляет интересные возможности разработки, такие как перезагрузка горячего модуля (обновление модулей в запущенном приложении) и отладка в режиме реального времени.

Похожие публикации

Комментарии