Как рассчитать разницу состояний Vuex без активации реактивности

Question

У меня есть список компонентов, который меняет состояние Vuex после нажатия.И я хочу отобразить разницу между двумя значениями состояния Vuex: до и после действия, отправляемого из обработчика щелчка.

Это может быть что-то вроде этого:

<template>
<ul>
  <li v-for="item of items" @click="clickItem">{{difference}}</li>
</ul>
</template>
<script>
    export default {
        methods: {
              difference() {
                  let oldValue = this.$store.getters.getValue();
                  this.$store.dispatch(SOME_ACTION);
                  let newValue = this.$store.getters.getValue();
                  this.$store.dispatch(UNDO_SOME_CATION);
                  return newValue-oldValue;
              }
              clickItem() {
                  this.$store.dispatch(SOME_ACTION);
              }
        }
    }
</script>

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

Есть лиЕсть ли возможность отключить реактивность Vuex, чем диспетчерское действие, получить новое значение, чем диспетчеризировать отмену действия и включить реактивность?Если да, это может решить мою проблему.

Answer 1

Это не проверено, но моя идея состоит в том, чтобы difference возвращал его функциональность из IIFE (выражение вызова сразу вызванной функции), а затем добавлял флаг для того, был ли он отправлен или нет.

const difference = (function() {
  let dispatched;

  return function() {
    if (dispatched) {
      dispatched = false;
      return;
    }

    let oldValue = this.$store.getters.getValue();
    this.$store.dispatch(SOME_ACTION);
    dispatched = true;

    let newValue = this.$store.getters.getValue();
    this.$store.dispatch(UNDO_SOME_CATION);
    return newValue-oldValue;
  }
})()