Простейший стор

В центре каждого приложения Vuex находится хранилище. «Хранилище» — это, по сути, контейнер, в котором хранится состояние вашего приложения

Есть две вещи, которые отличают хранилище Vuex от простого глобального объекта
  • 1. Хранилища Vuex реагируют на изменения. Когда компоненты Vue извлекают из него состояние, они будут оперативно и эффективно обновляться, если состояние хранилища изменится
  • 2. Вы не можете напрямую изменить состояние магазина. Единственный способ изменить состояние хранилища — явно зафиксировать мутации. Это гарантирует, что каждое изменение состояния оставляет отслеживаемую запись, а также предоставляет инструменты, которые помогают нам лучше понимать наши приложения

Давайте создадим простейший стор. Это довольно просто — просто укажите объект начального состояния и некоторые мутации

Теперь вы можете получить доступ к объекту состояния как store.state и вызвать изменение состояния с помощью store.commit метода

В компоненте Vue вы можете получить доступ к хранилищу как this.$store. Теперь мы можем зафиксировать мутацию, используя метод компонента

Опять же, причина, по которой мы фиксируем мутацию вместо store.state.count прямого изменения, заключается в том, что мы хотим явно отслеживать ее. Это простое соглашение делает ваше намерение более явным, так что вы можете лучше рассуждать об изменениях состояния вашего приложения при чтении кода. Кроме того, это дает нам возможность реализовать инструменты, которые могут регистрировать каждую мутацию, делать снимки состояния или даже выполнять отладку путешествий во времени.

Использование состояния хранилища в компоненте просто предполагает возврат состояния в вычисляемом свойстве, поскольку состояние сохранения является реактивным. Запуск изменений просто означает внесение изменений в методы компонента.