Watch ARRAY_ADD

[JFGHT]

I've got a Vuex state just like this:

state: {
  payments: [ ] // Array of Objects
}

How do you watch in a Vue component that state slice when a payment is added to the Vuex store? My code:

watch: {
    payments: {
      handler (newPaymentData, oldPaymentData) {
        console.log(newPaymentData)
        // window.location.replace(paymentInitSuccess.data.link)
      },
      deep: true
    }
  },

Both, newPaymentData and oldPaymentData are exactly the same in the watch (when they shouldn't be).

[JFGHT]

I wasn't sure this was the place to post this issue and I'm still not sure but anyway I'm updating it. I found a workaround that it's not that good performance-wise:

computed: {
    ...mapState({
      balance: state => state.balances,
      asset: state => state.asset,
      payments: state => cloneDeep(state.payments)
    })
  },

Using lodash's cloneDeep will make it.

[posva]

It's the same array with new elements added to it. It's modified inline using splice, that's why newData === oldData 🙂