Начало работы

Попробуйте этот урок на Scrimba

В основе каждой приложения Vuex лежит хранилище. "Хранилище" — это, по сути, контейнер, который хранит состояние вашего приложения. Есть две вещи, которые отличают хранилище Vuex от обычного глобального объекта:

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

Самое простое хранилище

ПРИМЕЧАНИЕ

В последующих примерах кода мы будем использовать синтаксис ES2015. Если вы еще не знакомы с ним, вам стоит (opens new window)!

После установки Vuex давайте создадим хранилище. Это довольно просто — просто укажите начальный объект состояния и некоторые мутации:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

Для того, чтобы получить доступ к свойству this.$store в ваших компонентах Vue, вам нужно предоставить созданное хранилище экземпляру Vue. Vuex имеет механизм "внедрения" хранилища во все дочерние компоненты из корневого компонента с помощью опции store:

new Vue({
  el: '#app',
  store: store,
})

СОВЕТ

Если вы используете ES6, вы также можете использовать сокращенную запись свойств объектов ES6 (она используется, когда имя ключа объекта совпадает с именем переменной, переданной в качестве свойства):

new Vue({
  el: '#app',
  store
})

Теперь мы можем зафиксировать мутацию из метода компонента:

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

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

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

Вот пример самого простого приложения подсчета Vuex здесь (opens new window).

Далее мы подробно рассмотрим каждый ключевой момент, начиная с состояния.

← Установка Состояние →