Vuex Mapping Getter с аргументом-кэшируется?

На мой взгляд это анти-паттерн. Это странный способ направить метод. Кроме того, нет, здесь нет кэширования, так inRangeнемедленно возвращает значение (конечная функция) без использования каких - либо членов в state-поэтому Vue обнаруживает 0 реактивных зависимостей.

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

Аналогичный вопрос здесь: vuexjs getter с аргументом

Поскольку вы хотите централизовать это поведение - я думаю, что вы должны просто сделать это в отдельном модуле, возможно, как миксин. Это также не будет кэшироваться, поэтому вам придется обернуть его (и вход) в computedили использовать какую-то другую memoization

Что-то вроде этого:

import { inRange } from './state/methods';
import { mapGetters }  from 'vuex';

const Example = Vue.extend({
  data: {
    rangeInput: 10
  },
  computed: {
    ...mapGetters(['lower', 'higher']),
    inRange() {
      return inRange(this.rangeInput, this.lower, this.higher);
    }
  }
});

Просто чтобы проиллюстрировать, почему я принял ответ Мэтта, вот рабочий фрагмент, ключевой момент, чтобы заметить, вместо того, чтобы:

Vuex.mapGetters(['inRange'])

Существует истинное вычисляемое свойство:

inRange4: function() {
  return this.$store.getters.inRange(4);
}

Это, как видно из выполнения фрагмента кода, привело к правильному кэшированию значения. Как я уже сказал, этот шаблон не тот, который я могу использовать, поскольку я бы в конечном итоге получил слишком много вычисляемых свойств (inRange1, inRange2, inRange3 и т. д.), Однако он отвечает на вопрос с рассматриваемым примером.

Я решил продолжить использовать код из вопроса, без изменений .

Примечание: ответ Мэтта не соответствует этому коду точно, и я считаю, что его намерение состояло в том, что состояние из магазина будет сопоставлено с экземпляром Vue, который я считаю ненужным.

const store = new Vuex.Store({
  state: {
    lower: 5,
    higher: 10,
    unrelated: 3
  },
  getters: {
    inRange: state => value => {
      console.log('inRange run')
      return (state.lower <= value) && (state.higher >= value)
    }
  },
  mutations: {
    reduceLower: state => state.lower--,
    incrementUnrelated: state => state.unrelated++
  }
})

new Vue({
  el: '#app',
  template: "<div>{{ inRange4 }}, {{ unrelated }}</div>",
  store,
  computed: Object.assign(
    {
      inRange4: function() {
        return this.$store.getters.inRange(4);
      }
    },
    Vuex.mapState(['unrelated'])
  ),
})

setTimeout(function() {
  console.log('reduceLower')
  store.commit('reduceLower')
  setTimeout(function() {
    console.log('incrementUnrelated')
    store.commit('incrementUnrelated')
  }, 3000);  
}, 3000);

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<div id="app"></div>

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

inrange[4];

Я часто использую его для инициализации различных видов доступа, я получаю массив из своего бэкэнда и должен получить доступ к нему по какому-то полю (например, ID). Для приведенного выше примера это кажется разумным, так как диапазон невелик:

const store = new Vuex.Store({
  state: {
    lower: 5,
    higher: 10,
    unrelated: 3
  },
  getters: {
    inRange: state => {
      console.log('inRange run')
      var result = {};
      for( var i = state.lower; i < state.higher; i++) {
        result[i] = true;
      }
      return result;
    }
  },
  mutations: {
    reduceLower: state => state.lower--,
    incrementUnrelated: state => state.unrelated++
  }
})

new Vue({
  el: '#app',
  template: "<div>{{ inRange[4] }}, {{ unrelated }}</div>",
  store,
  computed: Object.assign(
    {
      inRange: function() {
        return this.$store.getters.inRange;
      }
    },
    Vuex.mapState(['unrelated'])
  ),
})

setTimeout(function() {
  console.log('reduceLower')
  store.commit('reduceLower')
  setTimeout(function() {
    console.log('incrementUnrelated')
    store.commit('incrementUnrelated')
  }, 3000);  
}, 3000);

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<div id="app"></div>