store踩坑

某个方法里面写的是：

getCenter (index, center) {
  let listTemp = this.$store.state.list
  listTemp[index] = center
  this.$store.commit('UPDATE_list', listTemp)
}

结果在另一个组件监听这个变量的时候，却发现在watch中监听不到，但是已经进入store并且store里面的值是发生变化了的。

getCenter (index, center) {
  let listTemp = this.list.slice(0) // 返回新的数组
  listTemp[index] = center
  this.$store.commit('UPDATE_list', listTemp)
}

这样解决了问题，猜测是因为同一个引用，对于引用对象，watch监听的应该是内存地址的变化

 

后面使用了另一种赋值方式

listTemp.splice(index, 1, center)

这样子在watch中也能监听到变化，但是数组的索引赋值却不行，是因为Vue的watch没有对数组的索引改变进行监听

 

相当于对象的字面量赋值和属性赋值的区别吧，看下面的例子：

这个时候arr1和arr2都是指向同一块内存地址的，数组的某一项被改变不会影响两个数组的指向

 此时如果将arr2指向另一块内存，即下面的写法：

arr2被赋值之后就会指向不同的内存地址。