Arrays Vue watch阵列推送相同的旧值和新值

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

import to from'wait to js'
从“@/main”导入{functions}
从“Vue”导入Vue
const GENERATE_TX_SUCCESS='GENERATE_TX_SUCCESS'
const GENERATE_TX_ERROR='GENERATE_TX_ERROR'
导出默认值{
国家：[]，
突变：{
[生成发送成功]（状态，生成扩展数据）{
state.push（{transaction:{…generateTxData}}）
},
[生成发送错误]（状态，generateTxError）{
state.push（{transaction:{…generateTxError}}）
}
},
行动：{
异步generateTx（{commit}，数据）{
const[generateTxError，generateTxData]=wait to（functions.httpscalable（'generateTx'）（data））
if（generateTxError）{
提交（生成发送错误，生成执行错误）
}否则{
提交（生成发送成功，生成扩展数据）
}
}
},
获取者：{}
}

然后，在.vue组件中，我有一块手表：

观察：{
索赔：{
处理程序（新扩展数据、旧扩展数据）{
console.log（新扩展数据）
}
}
}

我在这里面临的问题是，新的扩展数据与旧的扩展数据相同

根据我的理解，因为这是一个推送，它检测到了变化，所以它不是以下警告之一：

所以基本上问题是这个：

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue不保留预变异值的副本

然后我的问题是：我应该如何在突变中解决这个问题

编辑：

我还尝试了

Vue.set（state、state.length、generateTxData）

但得到了相同的行为

编辑2-临时解决方案-（性能不佳）：

我正在通过以下方式适应我的解决方案：

计算：{
…地图状态({
声明：state=>cloneDeep（state.claims）
})
},

您可以将状态分配给新对象：

  mutations: {
    [GENERATE_TX_SUCCESS] (state, generateTxData) {
      state = [
         ...state,
         { transaction: { ...generateTxData } }
      ]
    },
    [GENERATE_TX_ERROR] (state, generateTxError) {
      state = [
         ...state,
         { transaction: { ...generateTxError } }
      ]
    }
  }

这个答案是基于

你需要功能

基本上，创建这样的计算值

计算：{
索赔人（）{
return uu.cloneDeep（此.claims）；
}
}

发生的情况是，每当一个新的值被推入

索赔

，

索赔者

将成为一个全新的对象

因此，当您观看

claimsForWatcher

时，您将不会再有“旧值将与新值相同，因为它们引用相同的对象/数组”的问题

观察：{
claimsForWatcher（旧值、新值）{
//现在oldValue和newValue将是两个完全不同的对象
}
}

---

警告：随着您的数据越来越大，这会带来性能成本

这会将观察者从状态中移除，因此手表不会被触发。如果是这样，您应该更改为推送到

状态。数据

而不是直接推送到

状态

那么我一定要创建一个以数组作为子属性的对象吗？难道没有其他办法吗？这确实是一个糟糕的性能解决方案。我将使用它，直到有更好的解决方案，但不会标记为最终答案，以保持这个问题的开放性。谢谢你。@Jesúsfuents实际上你可能不需要深度克隆。根据您想查看的内容，浅层克隆可能就足够了。相反：

claimsforatcher（newValue，oldValue）

first参数“new”second“old”