How to calculate the difference between the previous value and the new value that is changed from store?

Question

Vue.js

The data from the storage in the component appears like this:

computed: {
        ...mapGetters('currency', {
          trades:'getTrades',
          totalBuyQuantity:'getTradesTotalBuyQuantity',
          totalSellQuantity:'getTradesTotalSellQuantity'
        })
      },

I'm trying to make it so that I have a variable to store the difference between two totalBuyQuantity values ​​(previous and new updated from store). I tried to do like this:

data: function () {
        return {
          id: null,
          buy_difference: null,
          sell_difference: null,
          prevTotalBuyQuantity:null,
          prevTotalSellQuantity:null
        }
      },

In mounted() I set the values ​​:

this.prevTotalBuyQuantity = this.totalBuyQuantity;
          this.prevTotalSellQuantity = this.totalSellQuantity;

And in beforeUpdate() , when we already have new data, I try to do the following:

this.buy_difference = this.totalBuyQuantity - this.prevTotalBuyQuantity;
        this.sell_difference = this.totalSellQuantity - this.prevTotalSellQuantity;

But in the end, it is not the difference that is displayed, but simply the current value of the indicator, apparently I just reset the previous value all the time. How can you correctly calculate the difference between the current indicator and the previous one? I would not want to write a separate getter for this.

Answer 1

as a result, it is not the difference that is displayed, but simply the current value of the indicator

Which is probably not surprising at all - I don't see you updating the previous value after calculating the difference. It is initially zero for you, presumably - well, you constantly calculate the difference with zero.
In general, there is no need to store the previous value:

watch: {
  totalBuyQuantity(newVal, oldVal) {
    this.buyDiff = newVal - oldVal;
  },
},