如何检索存储状态的旧值和新值答案

【问题标题】：How to retrieve the old and new values of a store state如何检索存储状态的旧值和新值
【发布时间】：2018-11-04 12:33:34
【问题描述】：

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

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

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

这是我现在在组件中尝试的方式

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

【问题讨论】：

实际上，你想在观察者中做什么？如果我知道您要实现的目标，可以找到更简单的方法

标签： vue.js vue-component vuex

【解决方案1】：

根据 Jacobs 的回答，这是我在组件中重新安排的内容，以使其正常工作。

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

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

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

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

【讨论】：

【解决方案2】：

假设您在 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 中，数组只是一种特殊类型的对象。

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

例如，

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

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

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

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

【讨论】：