Vuex

Что это?

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

Для чего нужно это знать?

Основная идея Vuex в том, что эта библиотека создавалась для того, чтобы решить проблему централизованного хранилища данных того приложения Vue.js, которое вы разрабатываете. Когда мы разрабатываем приложение на Vue.js, мы имеем дело с множеством компонентов, которые в этом приложении используются. Эти компоненты вложены один в другой и получается сложная древовидная структура. У каждого компонента есть data (уровень данных), в котором находятся данные относящиеся к этому компоненту. Но, в процессе работы приложения возникает момент, что нужно передавать данные из одного компонента в другой. Когда что-то изменилось в одном компоненте, нужно передать данные в другой. Из родительского компонента в дочерний данные передаются с помощью props, а обратный процесс происходит с помощью emit. Все ничего, но представьте, что нужно передать данные от компонентов, которые находятся в разных ветках. Данным нужно будет пройти очень большой путь. Такая ситуация плоха с точки зрения производительности приложения и с точки зрения скорости программирования. Нужно будет прописать много кода во многих компонентах, чтобы обеспечить такой обмен данными. Разработчики Vue.js предложили решение в виде центрального хранилища данных Vuex. В этом хранилище будут храниться какие-то общие данные, которые могут применяться в любом компоненте приложения. Взаимодействие (обмен данными) между компонентами будет выполняться через центральное хранилище. Vuex - это не обязательный элемент приложения Vue.js, можно разрабатывать приложения и без него, но для сложных приложений - это значительно упрощает жизнь разработчика.

Какие базовые понятия включает этот навык?

Геттеры. Часть хранилища Vuex, которые возвращают вычисляемые данные текущего состояния хранилища компонентам. Мутации. Единственным способом изменения состояния хранилища во Vuex являются мутации. Мутации во Vuex очень похожи на события: каждая мутация имеет строковый тип и функцию-обработчик. В этом обработчике и происходят, собственно, изменения состояния, переданного в функцию первым аргументом. Действия или экшены. Действия — похожи на мутации с несколькими отличиями: вместо того, чтобы напрямую менять состояние, действия инициируют мутации; действия могут использоваться для асинхронных операций. State. Хранилище, где хранятся данные. Если Vue компоненты, которые используются в приложении, хранят данные внутри data. То хранилище Vuex хранит данные в state.

Где я могу освоить этот навык?

Освоить навык «Vuex» ты можешь проходя обучение в нашей менторинге по программе «Frontend-разработчик». Более подробно навык изучается в проекте Vue Todo List