如何检索商店状态的旧值和新值

在我的组件中，我试图获取在 vuex 存储状态中分配的特定对象数组的旧值和新值，如下所示。但是，当我 newArray 和 oldArray 返回相同的对象数组时。

我从以下文档中了解了以下内容，但我不明白检索不同版本的最佳方法是什么。

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

这是我现在在组件中尝试执行的操作

export default {
  name: 'O1_OrderBook',
  watch: {
      '$store.state.orderBookSell': {
         deep: true,
         handler (newArray, oldArray) {
           console.log(newArray,oldArray)
         }
       }
    },
}

假设当你在 Javascript 中创建一个数组/对象时，

 var arr = [1,2,3];

这会在浏览器内存中创建一个数组。但什么arr变量包含的不是整个数组值，它包含对浏览器内存中数组的引用。你可以把它想象成arr包含一个地址，可以将您指向浏览器内存中的真实数组值。

如果你这样做

var arr = [1,2,3];
var arr2 = arr;
arr2[0] = 4;
console.log(arr); // you would get [4,2,3];

editing arr2改变了arr也。因为它们都指向浏览器内存中的同一个数组。

这就是“旧值将与新值相同，因为它们引用相同的对象/数组" means.

同样的原理也适用于对象。在 Javascript 中，数组只是一种特殊类型的对象。

要在观察器中检索数组的不同版本，您必须在每次更改数组时克隆它以将其设置为新数组。

例如，

state.orderBookSell = [...state.orderBookSell];

但.....[...array]是浅克隆，不是深克隆。这是一个问题。你有一个对象数组。请记住，对象也有相同的规则。它们通过引用传递。所以你必须进行深度克隆，以便所有对象也被克隆。

using lodash克隆深 https://lodash.com/docs#cloneDeep深度克隆方法

state.orderBookSell = _.cloneDeep(state.orderBookSell);