Состояние - state

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

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

Использование состояния Vuex в компонентах Vue

Поскольку хранилище Vuex реактивно, самый простой способ «получения» — просто вернуть часть состояния хранилища в вычисляемом(computed) свойстве:

// создадим компонент-счётчик:
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count() {
      return store.state.count;
    }
  }
};

Любые изменения store.state.count вызовут перерасчёт вычисляемого(computed) свойства и запуск связанных с ним обновлений DOM.

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

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

const app = new Vue({
  el: '#app',
  // указываем хранилище в опции «store», что обеспечит
  // доступ к нему также и во всех дочерних компонентах
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
});

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

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

Вспомогательная функция mapState

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

// В полной сборке функция доступна через Vuex.mapState
import { mapState } from 'vuex';

export default {
  // ...
  computed: mapState({
    // стрелочные функции могут сделать код очень кратким
    count: state => state.count,

    // передача строки 'count' аналогична записи `state => state.count`
    countAlias: 'count',

    // для доступа к локальному состоянию через `this`,
    // необходимо использовать обычную функцию
    countPlusLocalState(state) {
      return state.count + this.localCount;
    }
  })
};

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

computed: mapState([
  // проксирует в this.count доступ к store.state.count
  'count'
]);

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

mapState возвращает объект, что бы использовать его в сочетании с другими локальными вычисляемыми свойствами можно воспользоваться оператором распространения объектов `...:

computed: {
  localComputed () { /* ... */ },
  // смешиваем результат mapState с внешним объектом
  ...mapState({
    // ...
  })
}