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

Попробуйте это занятие на Scrimba

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

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

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

ПРИМЕЧАНИЕ

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

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

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* your root component */ })

// Install the store instance as a plugin
app.use(store)

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

store.commit('increment')

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

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

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

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

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

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

Установка

Состояние