为何通过Vuex Getters获取的值修改后会同步改变Store值？

这事儿核心原因其实是引用类型的赋值逻辑在搞鬼，咱们一步步拆解来看：

首先，JavaScript里的Date对象属于引用类型，和字符串、数字这种“值类型”不一样。当你执行：

let startdate = this.$store.getters.getDateRange.start

的时候，你并没有得到一个全新的日期副本，而是拿到了指向Store中那个Date实例的“引用”——说白了，startdate和Store里的start其实是同一个对象，只是换了个名字而已。

接下来你写：

let compareStart = startdate

这同样是把这个引用复制了一遍，所以compareStart、startdate、Store里的start三个变量，全都是指向同一个Date对象的。这时候你调用compareStart.setDate()，本质上就是直接修改了那个共享的Date实例，Store里的值自然也就跟着变了，因为它们本来就是同一个东西。

解决办法 #

要避免这种意外修改Store的情况，你需要给Date对象创建一个独立的副本，而不是直接赋值引用。最简单的方式就是用new Date()包裹原始日期值，生成全新的Date实例：

// 创建独立副本，不再直接引用Store中的对象
let startdate = new Date(this.$store.getters.getDateRange.start)
let endDate = new Date(this.$store.getters.getDateRange.end)

let compareStart = startdate
compareStart.setDate(startdate.getDate() - 7)
let compareEnd = endDate
compareEnd.setDate(endDate.getDate() + 7)

这样修改compareStart和compareEnd的时候，只会改动你自己创建的副本，Store里的原始日期就不会被意外修改了。

内容的提问来源于stack exchange，提问作者Joe Kurian