Vuex . Это произносится как «вевкс» или «вевекс»? Или, может быть, это означает «vew», произносится с молчаливым «x» во французском стиле?
Моя проблема с пониманием Vuex началась только с названия.
Будучи страстным разработчиком Vue, я достаточно много слышал о Vuex, чтобы подозревать, что он должен быть важной частью экосистемы Vue, даже если я не знал, что это на самом деле.
В конце концов, мне было достаточно удивления, поэтому я пошел к документации с планами краткого обзора; Достаточно, чтобы понять.
К моему огорчению, меня встретили незнакомые термины, такие как «модель государственного управления», «глобальный синглтон» и «источник правды». Эти термины могут иметь смысл для тех, кто уже знаком с этой концепцией, но для меня они совсем не склеиваются.
Однако я понял, что Vuex как-то связан с Flux и Redux . Я тоже не знал, что это было, но подумал, что это может помочь, если я сначала исследую их.
После небольшого исследования и настойчивости, понятия, стоящие за жаргоном, наконец начали материализоваться в моей голове. Я получил это. Я вернулся к документации Vuex, и она, наконец, поразила меня … Vuex чертовски крут!
Я до сих пор не совсем уверен, как это произнести, но Vuex стал неотъемлемой частью моего инструментария Vue.js. Я думаю, что это тоже стоит вашего времени, чтобы проверить это, поэтому я написал этот учебник по Vuex, чтобы дать вам представление, которое я хотел бы получить.
Вам также может понравиться:
Пример Vue: Создание приложения TODO с использованием Vue.js 2, Vuex и Codemix [Video] .
Понимание проблемы, которую решает Vuex
Понять Vuex намного проще, если вы сначала поймете проблему, для решения которой она предназначена.
Представьте, что вы разработали приложение для многопользовательского чата. Интерфейс имеет список пользователей, приватные окна чата, почтовый ящик с историей чата и панель уведомлений, чтобы информировать пользователей о непрочитанных сообщениях от других пользователей, которых они в данный момент не просматривают.
Миллионы пользователей ежедневно общаются с миллионами других пользователей через ваше приложение. Тем не менее, есть жалобы на неприятную проблему: панель уведомлений будет иногда давать ложные уведомления. Пользователь будет уведомлен о новом непрочитанном сообщении, но когда он проверяет, что это такое, это просто сообщение, которое он уже видел.
То, что я описал, это реальный сценарий, который разработчики Facebook имели со своей системой чата несколько лет назад. Процесс решения этой проблемы вдохновил их разработчиков на создание архитектуры приложений, которую они назвали «Flux». Flux составляет основу Vuex, Redux и других подобных библиотек.
Flux
Разработчики Facebook некоторое время боролись с ошибкой «уведомления зомби». В конце концов они поняли, что его постоянный характер был не просто ошибкой; это указало на некоторый основной недостаток в архитектуре приложения.
Недостаток легче всего понять абстрактно: если в приложении имеется несколько компонентов, которые совместно используют данные, сложность их взаимосвязей возрастет до такой степени, что состояние данных больше не будет предсказуемым или понятным. Следовательно, приложение становится невозможным для расширения или поддержки.
Идея Flux заключалась в создании набора руководящих принципов, которые описывают масштабируемую архитектуру веб-интерфейса, которая в достаточной степени устраняет этот недостаток. Не только для приложения чата, но и в любом сложном приложении пользовательского интерфейса с компонентами и общим состоянием данных.
Flux — это шаблон, а не библиотека.
Вы не можете перейти на GitHub и скачать Flux. Это шаблон дизайна, как MVC. Библиотеки, такие как Vuex и Redux, реализуют шаблон Flux так же, как другие структуры реализуют шаблон MVC.
Фактически, Vuex не реализует весь Flux, только подмножество. Не беспокойтесь об этом сейчас, давайте вместо этого сосредоточимся на понимании ключевых принципов, которые оно соблюдает.
Принцип № 1: Единый Источник Истины
Компоненты могут иметь локальные данные, о которых должны знать только они. Например, положение полосы прокрутки в компоненте списка пользователей, вероятно, не представляет интереса для других компонентов.
Но любые данные, которые должны совместно использоваться компонентами, то есть данные приложения, должны храниться в одном месте, отдельно от компонентов, которые их используют. Это единственное место называется «магазин». Компоненты должны считывать данные приложения из этого местоположения и не сохранять собственную копию, чтобы предотвратить конфликт или разногласие.
JavaScript
1
// Instantiate our Vuex store
2
const store = new Vuex.Store({
3
// "State" is the application data your components
5
// will subscribe to
6
state: {
8
myValue: 0
9
}
10
});
11
// Components access state from their computed properties
12
const MyComponent = {
13
template: `<div>{{ myValue }}</div>`,
14
computed: {
15
myValue () {
16
return store.state.myValue;
17
}
18
}
19
};
Принцип № 2: данные только для чтения
Компоненты могут свободно читать данные из магазина. Но они не могут изменить данные в магазине, по крайней мере, не напрямую.
Вместо этого они должны сообщить хранилищу о своем намерении изменить данные, и хранилище будет нести ответственность за внесение этих изменений с помощью набора определенных функций, называемых «мутациями».
Почему этот подход? Если мы централизуем логику изменения данных, нам не нужно далеко ходить, если в состоянии есть несоответствия. Мы сводим к минимуму вероятность того, что какой-то случайный компонент (возможно, в стороннем модуле) неожиданно изменил данные.
JavaScript
xxxxxxxxxx
1
const store = new Vuex.Store({
2
state: {
3
myValue: 0
4
},
5
mutations: {
6
increment (state, value) {
7
state.myValue += value;
8
}
9
}
10
});
11
// Need to update a value?
12
// Wrong! Don't directly change a store value.
13
store.myValue += 10;
14
// Right! Call the appropriate mutation.
15
store.commit('increment', 10);
Принцип № 3: мутации синхронны
Гораздо проще отлаживать несоответствия данных в приложении, которое реализует два вышеуказанных принципа в своей архитектуре. Вы можете регистрировать фиксации и наблюдать, как состояние изменяется в ответе (что вы действительно можете сделать при использовании Vuex с Vue Devtools).
Но эта способность была бы подорвана, если бы наши мутации применялись асинхронно. Мы знали бы порядок поступления наших коммитов, но не знали бы порядок, в котором наши компоненты их фиксировали.
Синхронные мутации гарантируют, что состояние не зависит от последовательности и времени непредсказуемых событий.
Наконец: что такое Vuex?
Со всем этим фоном мы наконец-то смогли решить этот вопрос. Vuex - это библиотека, которая помогает вам реализовать архитектуру Flux в вашем приложении Vue. Применяя принципы, описанные выше, Vuex сохраняет данные вашего приложения в прозрачном и предсказуемом состоянии, даже когда эти данные совместно используются несколькими компонентами.
Его реализация включает в себя хранилище, пользовательские мутаторы, и он будет реактивно обновлять любые компоненты, считывающие данные из хранилища.
Это также позволяет использовать классные функции разработки, такие как горячая перезагрузка модулей (обновление модулей в работающем приложении) и отладка во времени (возврат к мутациям для отслеживания ошибок).
Звук Круто. У меня есть несколько вопросов…
Возможно, вам сейчас интересно, нужно ли вашему приложению Vuex, как оно интегрируется с vue-devtools или как вы можете фиксировать данные из асинхронных функций. Моя цель в этой статье состояла в том, чтобы дать вам учебник по Vuex. Я надеюсь, что вы найдете, если вы перейдете к документации сейчас, вы будете чувствовать себя хорошо подготовленными, чтобы получить эти ответы самостоятельно.