Vue.js 如何检索存储状态的新旧值

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

computed: {
    orders () {
      return _.cloneDeep(this.$store.state.theArray)
    },
  },

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

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。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];

编辑

arr2

也已更改

arr

。因为它们都指向浏览器内存中的同一数组

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

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

---

要在watcher中检索阵列的不同版本，必须对其进行克隆，以便在每次对其进行变异时将其设置为新阵列

例如

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

但是<代码>[…数组]是浅层克隆，而不是深层克隆。这是个问题。您有一个对象数组。记住，对象也有相同的规则。它们是通过引用传递的。所以你必须做一个深度克隆，这样所有的对象都能被克隆

深度克隆的使用方法

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

---

基于Jacobs的回答，这是我在我的组件中重新安排的，以使其工作

我在组件中创建了一个计算变量，用于克隆对象的特定状态数组

computed: {
    orders () {
      return _.cloneDeep(this.$store.state.theArray)
    },
  },

然后为计算变量设置一个手表

watch: {
    orders (newValue,oldValue) {
      console.log(newValue,oldValue)
    }
  }

---

事实上，你想在《守望者》里做什么？如果我知道你想要达到的目标，我可以找到一个更简单的方法