arrays - Vue watch 数组(或对象)推送相同的旧值和新值

Question

我正在使用 Vuex，我创建了一个名为 Claims 的模块，如下所示:

import to from 'await-to-js'
import { functions } from '@/main'
import Vue from 'vue'

const GENERATE_TX_SUCCESS = 'GENERATE_TX_SUCCESS'
const GENERATE_TX_ERROR = 'GENERATE_TX_ERROR'

export default {
  state: [ ],
  mutations: {
    [GENERATE_TX_SUCCESS] (state, generateTxData) {
      state.push({ transaction: { ...generateTxData } })
    },
    [GENERATE_TX_ERROR] (state, generateTxError) {
      state.push({ transaction: { ...generateTxError } })
    }
  },
  actions: {
    async generateTx ({ commit }, data) {
      const [generateTxError, generateTxData] = await to(functions.httpsCallable('generateTx')(data))
      if (generateTxError) {
        commit(GENERATE_TX_ERROR, generateTxError)
      } else {
        commit(GENERATE_TX_SUCCESS, generateTxData)
      }
    }
  },
  getters: { }
}

然后，在 .vue 组件中我确实有这个 watch :

 watch: {
    claims: {
      handler (newTxData, oldTxData) {
        console.log(newTxData)
      }
    }
 }

我在这里面临的问题是 newTxData 与 oldTxData 相同。

据我了解，由于这是一个推送并且它会检测到更改，因此不是以下警告之一:https://v2.vuejs.org/v2/guide/list.html#Caveats

所以基本上问题是这个:

Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.

https://v2.vuejs.org/v2/api/#vm-watch

那么我的问题是:我应该如何在突变中解决这个问题？

编辑:

我也尝试了 Vue.set(state, state.length, generateTxData) 但得到了相同的行为。

编辑 2 - 临时解决方案 -(性能不佳):

我正在适应 @matthew (thanks to @Jacob Goh)到我的解决方案 vuexfire :

computed: {
  ...mapState({
    claims: state => cloneDeep(state.claims)
  })
},

Answer 1

此答案基于 this pretty smart answer by @matthew

您将需要 lodash cloneDeep功能

基本上，像这样创建一个计算值

computed: {
    claimsForWatcher() {
        return _.cloneDeep(this.claims);
    }
}

发生的情况是，每次将新值插入 claims 时，claimsForWatcher 都会变成一个全新的对象。

因此，当您观看 claimsForWatcher 时，您不会遇到 '旧值与新值相同的问题，因为它们引用了相同的 Object/Array' 了。

watch: {
    claimsForWatcher(oldValue, newValue) {
        // now oldValue and newValue will be 2 entirely different objects
    }
}

这也适用于对象。

在您的克隆对象中可能有数百个(嵌套？)属性(对象)之前，现实生活中的用例对性能的影响被夸大了。

使用 clone 或 cloneDeep 克隆需要 1/10 毫秒，如 window.performance.now() 所报告的那样.所以在 Node 下用 process.hrtime() 测量它可能会显示更低的数字。