Геттеры #

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

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

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

Vuex позволяет определять «геттеры» в хранилище. Можете считать их вычисляемыми свойствами хранилища.

Геттеры получают состояние хранилища первым аргументом:

const store = createStore({
  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: {
    // смешиваем результат mapGetters с внешним объектом computed
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
      // ...
    ])
  }
}

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

...mapGetters({
  // проксирует `this.doneCount` в `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})