watch监听vuex中数组的变化

watch可以监听数组变化的情况

• watch能监听到数组push的改变

watch监听不到数组的情况

• 当你利用索引直接设置一个项时, eg: dataArr.demo[1] = 5
• 当你修改数组的长度时, eg: dataArr.demo.length = 3

state:{
	dataArr: [1,2,3,4,5]
},
mutations:{
	setDataArr(state){
		state.dataArr[1] = 22
	}
}

//然后在组件中监听  实际上，并不会打印
watch:{
	'$store.state.dataArr': function(){
		console.log("然而我无动于衷---");
	}
}

如果我想要watch能监听到呢？可以用 JSON.parse(JSON.stringify(state.dataArr))

state:{
	dataArr: [1,2,3,4,5]
},
mutations:{
	setDataArr(state){
		state.dataArr[1] = 22
		// 为了让watch能监听到它
		statw.dataArr = JSON.parse(JSON.stringify(state.dataArr))
	}
}

//然后在组件中监听  实际上，并不会打印
watch:{
	'$store.state.dataArr': function(){
		console.log("这下我可以监听到了---");
	}
}

JSON.parse(JSON.stringify(state.obj/arr))

JSON.parse(JSON.stringify(obj/arr))我们一般用来深拷贝，其过程说白了就是利用JSON.stringify将js对象(数组也是对象)序列化(变为JSON字符串)，再使用JSON.parse来反序列化(还原)js对象

序列化的作用是存储(对象本身存储的只是一个地址映射, 如果断电，随心将不复存在，因此需要将对象的内容转成字符串的形式再保存再磁盘上)和传输。

JSON.parse(JSON.stringify(state.obj/arr))
需要注意的一些问题

• 如果obj里有RegExp、Error对象，则序列化的结果只能得到空对象

const test = { name: 'a', date: new RegExp('\\w+') };    
      const copyed = JSON.parse(JSON.stringify(test));
      test.name = 'test'
      console.error('ddd', test, copyed)

• 如果obj里有函数、undefined等，则序列化后会将它们弄丢
  
• JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；

  function Person(name) {        
  		this.name = name;        
   }      
  const liai = new Person('liai');      
  const test = { name: 'a', date: liai};      // debugger
  const copyed = JSON.parse(JSON.stringify(test));
  test.name = 'test'
  console.error('ddd', test, copyed)

参考： 关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑