Question

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

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

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

这里我是如何尝试在组件

中立即执行此操作

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

Answer 1

当你在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。因为它们都指向浏览器内存中的同一个数组。

＆＃34; 旧值与新值相同，因为它们引用相同的对象/数组 ＆＃34;装置

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

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

例如，

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

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

使用lodash cloneDeep方法进行深度克隆

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

Answer 2

根据Jacobs的回答，这是我在我的组件中重新安排的，以便让它发挥作用。

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

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

然后为该计算变量设置监视

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

如何检索商店状态

2 个答案: