Vuex

# Введение

Пройдите этот урок на Scrimba

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

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

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

# Простейшее хранилище

ЗАМЕЧАНИЕ

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

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

# Vuex 3.x (для Vue 2)

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

# Vuex 4.x (для Vue 3)

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

const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})
const app = createApp({ /* ваш корневой компонент */ })
app.use(store)

Теперь можно получить доступ к объекту состояния через 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).

Далее мы разберём все основные понятия детальнее и начнём с состояния.

← Состояние →