Что такое Векс?
Vuex — это шаблон управления состоянием + библиотека для приложений vue.js. Он действует как репозиторий для всех частей приложения с правилами, регулирующими изменения, которые могут быть внесены в состояние.
Но что такое «шаблон управления состоянием»?
Это автономное приложение, состоящее из следующих частей:
- Состояние (данные), источник правды, который управляет нашим приложением;
- Представление (шаблон), декларативное отображение состояния;
- Действия (методы) и возможные способы изменения состояния в ответ на действия пользователя из представления.
Какова цель Vuex?
Когда дело доходит до приложений Vue, следует учитывать несколько потенциальных угроз. Есть одностраничные приложения (SPA), маршрутизация, веб-воркеры, Jest, Cypress и все остальное. Он становится всепоглощающим за короткое время. Задача заключается не в освоении этих технологий, а в понимании того, как лучше всего их использовать.
Тогда Векс. Какова его функция и почему кто-то может использовать его?
Позвольте мне начать с объяснения того, что он делает. Vuex — это плагин Vue, который служит единой базой данных для внешнего интерфейса вашего приложения. Приложение Vue состоит из нескольких разных частей, которые вместе образуют полнофункциональную интерфейсную программу. Может быть задействовано много экранов, в том числе один для редактирования пользователей, один для отображения пользователей и один для отображения одного пользователя. Vuex может помочь в этом, поскольку он централизует всю эту информацию, при этом предоставляя доступ к каждой из этих отдельных частей.
И это то, что Vuex может сделать.
Зачем нам нужен Vuex?
Предыдущий поток быстро ломается, когда у нас есть несколько компонентов, которые имеют общее состояние:
- Несколько представлений могут зависеть от одной и той же части информации.
- Действиям из разных представлений может потребоваться изменить одну и ту же часть состояния.
Нам необходимо убедиться, что наши взгляды не противоречат данным вашего приложения!
Вот когда Vuex приходит на помощь.
Экземпляр Vue против экземпляра Vuex
Прежде чем мы углубимся в особенности Vuex, давайте посмотрим, как он сочетается с Vue.
Экземпляр Vue
Экземпляр Vuex
В резюме:
- В реактивных данных и состоянии
- Наши данные можно обновлять с помощью методов Vue, а действия хранилища Vuex могут изменять состояние Vue.
- Vuex использует геттеры для доступа к состоянию, в то время как экземпляры Vue используют вычисляемые свойства для доступа к нашим данным.
- Основное отличие состоит в том, что переделке подвергаются и магазины.
Vuex в деталях
Компонентами Vuex являются состояние, мутации, действия, модули и геттеры.
Состояние
Состояние — это информация, на которую полагаются ваши компоненты и которую они отображают.
Мутации
Наше хранилище Vuex поддерживает мутации, которые представляют собой синхронный метод обновления состояния хранилища. (Мутации меняют состояние и отслеживают изменения по пути, поэтому, как и события, мутации имеют тип и обработчик, обработчик — это то, что фактически изменяет состояние, а тип — это то, как мы фиксируем мутацию.)
Рекомендуемый практика состоит в том, чтобы действия вызывали мутации, которые напрямую изменяют наше состояние; а с помощью инструментов разработки мы можем отменить мутацию и вернуть состояние к его более ранней версии.
Действия
Действия нашего API — это асинхронные структуры данных, которые можно использовать для извлечения данных из API (вместе с полезной нагрузкой, если необходимо), сохранения этих данных в состоянии, а затем возврата ответа инициирующему компоненту.
Добытчики
Используя геттеры программы, мы можем извлекать информацию для использования в любом модуле.
Вы можете использовать геттеры для выполнения логических операций с данными по мере их извлечения из состояния. (очень похоже на то, как у экземпляров Vue есть методы).
Поскольку вычисляемые свойства всегда актуальны с самым последним состоянием, они являются идеальным местом для использования геттеров.
Используемая информация:
пример репозитория:
