Получатели

Иногда нам может потребоваться вычислить производное состояние на основе состояния хранилища, например, отфильтровать список элементов и посчитать их:

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

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

Vuex позволяет определять «получатели» в хранилище. Их можно рассматривать как вычисляемые свойства для хранилищ. Как и вычисляемые свойства, результат получателя кешируется на основе его зависимостей и пересчитывается только при изменении некоторых из его зависимостей.

Получатели получат состояние в качестве первого аргумента:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Доступ через свойства

Получатели будут доступны в объекте store.getters , и вы можете получить значения как свойства:

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Получатели также получат другие получатели в качестве второго аргумента:

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

Теперь мы можем легко использовать его внутри любого компонента:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

Обратите внимание, что получатели, доступные как свойства, кэшируются как часть системы реактивности Vue.

Доступ через методы

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

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Обратите внимание, что получатели, доступные через методы, будут выполняться каждый раз при их вызове, и результат не кэшируется.

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

Вспомогательная функция mapGetters просто отображает получатели хранилища в локальные вычисляемые свойства:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Если вы хотите отобразить получатель под другим именем, используйте объект:

...mapGetters({
  // map `this.doneCount` to `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})