Состояние

Единое дерево состояний

Vuex использует единое дерево состояний — то есть, этот единственный объект содержит все состояния вашего приложения на уровне приложения и служит «единым источником истины». Это также означает, что обычно у вас будет только один store для каждого приложения. Единое дерево состояний упрощает поиск конкретного состояния и позволяет легко создавать снимки текущего состояния приложения для отладки.

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

Данные, которые вы храните в Vuex, подчиняются тем же правилам, что и data в экземпляре Vue, т.е. объект состояния должен быть простым. См. также: Vue#data (opens new window).

Получение состояния Vuex в компоненты Vue

Итак, как отобразить состояние внутри store в наших компонентах Vue? Поскольку store Vuex реактивны, самый простой способ «получить» состояние из него — просто вернуть некоторое состояние store из вычислимого свойства:

// let's create a Counter component
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

Всякий раз, когда store.state.count изменяется, это приводит к переоценке вычислимого свойства и запуску связанных обновлений DOM.

Однако эта схема заставляет компонент полагаться на глобальный синглтон store. При использовании системы модулей требуется импортировать store в каждый компонент, использующий состояние store, а также требуется имитация при тестировании компонента.

Vuex предоставляет механизм «внедрения» store во все дочерние компоненты из корневого компонента с помощью параметра store (включенного Vue.use(Vuex)):

const app = new Vue({
  el: '#app',
  // provide the store using the "store" option.
  // this will inject the store instance to all child components.
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

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

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

Помощник mapState

Когда компоненту необходимо использовать несколько свойств состояния или геттеров store, объявление всех этих вычислительных свойств может стать повторяющимся и громоздким. Для решения этой проблемы мы можем воспользоваться помощником mapState, который генерирует для нас вычислительные функции-геттеры, экономя наши нажатия клавиш:

// in full builds helpers are exposed as Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // arrow functions can make the code very succinct!
    count: state => state.count,

    // passing the string value 'count' is same as `state => state.count`
    countAlias: 'count',

    // to access local state with `this`, a normal function must be used
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

Мы также можем передать строковый массив в mapState, когда имя сопоставленного вычислительного свойства совпадает с именем поддерева состояния.

computed: mapState([
  // map this.count to store.state.count
  'count'
])

Оператор расширения объектов

Обратите внимание, что mapState возвращает объект. Как мы можем использовать его в сочетании с другими локальными вычислительными свойствами? Обычно нам нужно использовать утилиту для объединения нескольких объектов в один, чтобы мы могли передать конечный объект в computed. Однако с помощью оператора расширения объектов, мы можем значительно упростить синтаксис:

computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
  ...mapState({
    // ...
  })
}

Компоненты по-прежнему могут иметь локальное состояние

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