Программирование [vuemastery] Основы Vuex (2022)

Red Sun

Red Sun

Редактор
Регистрация
01.01.22
Сообщения
7.640
[vuemastery] Основы Vuex (2022)

1663856305844


В этом курсе мы изучим основы Vuex: библиотека управления состоянием Vue. Если вы следовали нашему пути для начинающих, этот курс продолжится с того места, где остановился Real World Vue 3. К концу этого курса у вас будет четкое понимание того, когда и зачем использовать Vuex, и вы сможете реализовать его в своих собственных приложениях Vue. Урок за уроком мы будем добавлять Vuex в пример приложения, которое мы создали в курсе Real World Vue 3.

Но прежде чем мы начнем писать какой-либо код, нам нужно понять, что лежит в основе Vuex, и посмотреть на пример использования, который иллюстрирует различные части Vuex и то, как все это работает вместе.

Дело о государственном управлении
Управление состоянием в приложении, полном компонентов, может быть затруднено. Facebook обнаружил это на собственном горьком опыте и создал шаблон Flux, на котором основан Vuex. Vuex — это собственный шаблон и библиотека управления состоянием Vue. В этом уроке мы рассмотрим, зачем приложению может понадобиться Vuex и как он может улучшить ваше приложение.

Когда мы говорим о состоянии, мы имеем в виду данные, от которых зависят ваши компоненты и которые они отображают. Такие вещи, как сообщения в блогах, задачи и так далее. Без Vuex по мере роста вашего приложения каждый компонент Vue может иметь свою собственную версию состояния.

Но если один компонент меняет свое состояние, а дальний родственник также использует то же состояние, нам нужно сообщить об этом изменении. Существует стандартный способ передачи событий и передачи реквизитов для обмена данными, но это может стать слишком сложным.

Вместо этого мы можем объединить все наше состояние в одном месте. Одно местоположение, которое содержит текущее состояние всего нашего приложения. Единственный источник правды.

Единственный источник правды Это то, что предоставляет Vuex, и каждый компонент имеет прямой доступ к этому глобальному состоянию.

Как и данные экземпляра Vue, это состояние является реактивным. Когда один компонент обновляет состояние, другие компоненты, использующие эти данные, получают уведомление, автоматически получая новое значение.

Но просто объединение данных в единый источник достоверности не решает полностью проблемы управления состоянием. Что происходит, когда многие компоненты изменяют состояние по-разному, из разных мест?

Нам нужна некоторая стандартизация. В противном случае изменения в нашем состоянии могут быть непредсказуемыми и неотслеживаемыми.

Подробнее:
Скачать: