Как инженеры-программисты, специализирующиеся на создании веб-приложений, мы все понимаем необходимость составлять приложения с небольшими многократно используемыми компонентами, которые мы можем использовать для быстрого создания новых компонентов.
Однако часто только во время интеграции мы сталкиваемся с реальностью, что эти небольшие повторно используемые компоненты, на создание которых мы потратили недели или месяцы, теперь должны сосуществовать вместе и, вполне возможно, иметь общие данные и состояние приложения.
В прошлом мы предлагали такие решения, как Pub / Sub или Message Bus для решения этих проблем; но, как мы выяснили, ситуация быстро вышла из-под контроля, когда нескольким компонентам требовалось наблюдать за изменениями одних и тех же данных. А затем мы поняли, что все, что нам действительно нужно, - это центральное хранилище данных, к которому может мгновенно получить доступ любой компонент, и которое может просто автоматически обновлять эти компоненты каждый раз, когда состояние или свойство изменяются в нашем приложении.
Войдите в Государственное управление.
Что такое государственное управление?
Как описано в Википедии, Управление состоянием относится к управлению состоянием одного или нескольких элементов управления пользовательского интерфейса.
Это означает следующее. Управление состоянием - это шаблон программирования, в котором центральное хранилище данных отслеживает состояние любого компонента в нашем приложении в любой момент времени. Этот процесс обеспечивает согласованность данных во всех компонентах нашего приложения и в конечном итоге включает такие функции, как возможность обновления пользовательского интерфейса в реальном времени без необходимости обновления страницы.
Паттерн State Management был реализован различными способами разными поставщиками фреймворка; в мире React это часто называют «архитектурой Flux» с такими решениями, как Redux.
Сегодня я расскажу вам, как Vue.js использует этот шаблон программирования: Vuex.
Большая картинка
Начнем с определения некоторых понятий. Vuex вращается вокруг этих четырех ключевых понятий: Состояние (также известное как магазин), Мутации, Действия и Геттеры .
Состояние
Штат, также иногда называемый Магазином, - это просто место, где хранятся ваши данные. Vuex использует хранилище в виде одного дерева, что означает, что весь набор данных для вашего приложения хранится в одном объекте, что упрощает поиск определенной части состояния, но также отладка.
Начальное состояние определяется передачей объекта в свойство «state» конфигурации Vuex:
В этом примере я создал простое хранилище с состоянием «count», которое инициализируется значением по умолчанию 0.
Мутации
По сути, мутации - единственный способ изменить состояние. Они должны быть определены в конфигурации экземпляра хранилища путем реализации обработчика и могут быть вызваны с помощью метода commit.
Метод фиксации может быть вызван разными способами; но, по крайней мере, вам нужно будет предоставить так называемый тип, который является не чем иным, как именем обработчика мутации. Вы также можете передать некоторое значение мутации, указав его в качестве второго аргумента, или, альтернативно, передать и тип, и значение как объект.
Действия
Действия Vuex не следует путать с действиями Redux: их роль не в изменении состояния, а в фиксации мутаций. Преимущество действий в том, что они могут содержать асинхронную логику.
Обратите внимание, что метод обработчика действия предоставляет свойство context, которое по сути является ссылкой на экземпляр магазина, позволяя вам вызывать метод фиксации в экземпляре.
Как упоминалось выше, действия также могут использоваться для асинхронных операций; поэтому он идеально подходит, если, например, вам нужно получить некоторые данные с помощью запроса XHR и обновить состояние, когда данные станут доступны, вы можете настроить его следующим образом:
Геттеры
Наконец, четвертая важная концепция Vuex - это Getters. Думайте о геттерах как о вычисленных свойствах вашего состояния; они позволяют преобразовывать данные перед их возвратом в приложение без фактического изменения самого состояния. Затем эти вычисленные свойства отображаются в объекте store.getters:
Движение вперед
В этой статье я рассмотрел основные концепции Vuex. В следующем посте я покажу вам, как интегрировать и использовать хранилище в приложении Vue.js, а также как модулировать хранилище данных по мере роста вашего приложения.
