Last updated
Last updated
Vuex — паттерн управления состоянием + библиотека для приложений на Vue.js. Он служит централизованным хранилищем данных для всех компонентов приложения с правилами, гарантирующими, что состояние может быть изменено только предсказуемым образом.
Состояние — «источник истины», управляющий приложением;
Представление — отображение состояния заданное декларативно;
Действия — возможные пути изменения состояния приложения в ответ на взаимодействие пользователя с представлением.
Простейшее представление концепции «однонаправленного потока данных» выглядит так:
Простота быстро исчезает, когда появляется нескольких компонентов, основывающихся на одном и том же состоянии:
Несколько представлений могут зависеть от одной и той же части состояния приложения.
Действия из разных представлений могут оказывать влияние на одни и те же части состояния приложения.
Решая первую проблему, придётся передавать одни и те же данные входными параметрами в глубоко вложенные компоненты - это часто сложно и утомительно.
Решая вторую проблему, можно прийти к таким решениям, как обращение по ссылкам к родительским/дочерним экземплярам или попыткам изменять и синхронизировать несколько копий состояния через события.
Vuex позволяет вынести всё общее состояние приложения из компонентов и управлять им в глобальном синглтоне. При этом дерево компонентов становится одним большим «представлением» и любой компонент может получить доступ к состоянию приложения или вызывать действия для изменения состояния, независимо от того, где они находятся в дереве.