Введение

В центре любого Vuex-приложения находится хранилище(store).

Хранилище — это контейнер, в котором хранится состояние приложения.

Два момента отличают хранилище Vuex от простого глобального объекта:

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

2. Нельзя напрямую изменять состояние хранилища. Единственный способ внести изменения — явно вызвать мутацию. Это гарантирует, что любое изменение состояния оставляет след и позволяет использовать инструментарий, чтобы лучше понимать ход работы приложения.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
// Теперь можно получить доступ к объекту состояния через store.state
// и вызвать изменение состояния с помощью метода store.commit

store.commit('increment')

console.log(store.state.count) // -> 1

Причина, по которой мы вызывается мутация(mutations), вместо изменения store.state.count напрямую, в том, что таким образом мутацию можно явным образом отследить.

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

Инициирование изменений — это просто запуск мутаций в методах компонентов.