代码之家 › 专栏 › 技术社区 › matthew

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

vuex vue-component vue.js

1

matthew · 技术社区 · 7 年前

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

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

注意:当改变(而不是替换)一个对象或数组时,旧值将与新值相同,因为它们引用相同的对象/数组。Vue不保留预变异值的副本。

下面是我现在如何在组件中实现它

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

2 回复 | 直到 7 年前

1

2

Jacob Goh 7 年前

比如说,在Javascript中创建数组/对象时,

 var arr = [1,2,3];

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

如果你愿意

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

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

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

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

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

例如。,

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

但是 [...array] 是浅层克隆,不是深层克隆。这是个问题。你有一个对象数组。记住,对象也有相同的规则。它们是通过引用传递的。所以你要做一个深度克隆,这样所有的物体都能被克隆。

使用 lodash cloneDeep 深度克隆的方法

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

2

1

matthew 7 年前

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

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

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

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

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