Получатели

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

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: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

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

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