Vuex - когда использовать геттеры и когда использовать состояние

Question

Мне трудно понять, когда использовать геттер или состояние для лучшей производительности.

Я перечислю некоторые сценарии, которые вы можете комментировать:

Сценарий 1. Состояние получателей VS в действиях и получателях

В действии или получателе, если вы используете список продуктов несколько раз, чтобы найти результат, будете ли вы тогда использовать getters.products или state.products?

Кроме того, если вам нужно было использовать продукты 10 раз в одной и той же функции, вы бы вызвали getters.products или state.products 10 раз или вначале присваивали продукты переменной, а затем использовали ее10 раз?Есть ли какой-либо выигрыш в производительности по сравнению с другими?

Сценарий 2. Получатели, возвращающие функцию

В документации Vuex говорится, что возвращение функции в получателе будетне кэшировать результат этой функции.Так что иметь получателя для сортировки списка из 1000 продуктов было бы плохо, верно?Например:

const getters = {
  sortedProducts: state => {
    return state.products.sort(a, b => {
      ...
    })
  }
}

Таким образом, когда бы ни обновлялся товар, который может изменить или не изменить сортировку, тогда он будет выполнять весь расчет еще раз, или?

Было бы лучшевместо этого иметь состояние, которое вручную обновляется действием и мутацией?

Вообще, имеет ли смысл когда-либо получать получатели, возвращающие функции, связанные с большим объемом данных?

Answer 1

Vuex геттеры для Vue вычислено как Vuex состояние для Vue данные .

Сценарий 1

Если в действии или в получателе вы несколько раз используете список продуктов для поиска результата, будете ли вы тогда использовать getters.products или state.products?

Я не совсем понимаю ваш сценарий здесь;пример кода лучше иллюстрирует, что вы имеете в виду.

Допустим, у вас есть состояние products, которое представляет собой массив объектов продукта.Если вам нужен доступ к sorted (например) products в более чем одном месте, то создание sortedProducts getter будет лучше, чем сортировка products каждый раз, потому что Vue будет кэшировать результат ипересчитывайте его значение только при изменении массива products.

Кроме того, если вам нужно было использовать продукты 10 раз в одной и той же функции, вы бы вызвали getters.products или state.products 10 раз илиВы бы присвоили продукты переменной в начале, а затем использовали бы это 10 раз?Есть ли какой-либо выигрыш в производительности по сравнению с другими?

Нет необходимости присваивать его переменной в начале функции, если вы беспокоитесь о производительности.Стоимость производительности доступа к состоянию магазина или получателям ничтожно мала.Читаемость кода здесь важнее.

Сценарий 2

Функция получения sortedProducts не возвращает функцию, поэтому Vuex будет кэшировать результат.

Было бы лучше иметь вместо этого состояние, которое вручную обновляется действием и мутацией?

Если вы говорите о своем sortedProducts добытчике, нет.

Вообще, имеет ли смысл когда-либо получать методы получения, которые имеют отношение к большому объему данных?

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

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