How to calculate Vuex states difference without triggering reactivity

Question

I have list of components which changes Vuex state after click. And i want to render difference between two Vuex state values: before and after action dispatched from click handler.

It could be something like that:

<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>

But the problem is that this code produce infinite rendering loop because action dispatching changes Vuex store and Vuex reactivity in turn triggering app components rerendering.

Is there any possibility disable Vuex reactivity than dispatch action, get new value, than dispatch undo action and enable reactivity? If yes, it could solve my problem.

Dexygen Dexygen · Accepted Answer · 2019-02-28T12:55:04

This is untested but my idea is to have difference return it's functionality from an IIFE (immediately invoked function expression), then add a flag for whether it's been dispatched or not.

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;
  }
})()

How to calculate Vuex states difference without triggering reactivity

1 Answers