vue3+pinia存储对象赋值踩坑

vue3+pinia存储对象赋值踩坑

自我记录
前文描述:大概就是我在本地存储里面的对象obj1 里面的属性名 和我页面赋值 obj的属性名一致,我就直接赋值了,而没有一一对应去赋值,此时出现一个bug,就是因为我obj的对象是v-model双向数据绑定的input值,当我第一次改完触发保存存储时,下次在进入这个页面,先判断如果obj存在就赋值,问题来了,赋值之后我改input,本地存储的数据也变了

大概就是下面这样

// 例如  obj是
const salaryForm = ref({
  base: 0,
  deduct: 0,
  merit: 0,
  other: 0,
  subsidy: 0,
})
// obj1是
const salaryInfo = ref()
const setSalaryInfo = (v) => {
     salaryInfo.value = v
}
// 给obj1赋值
addInfoStore.setSalaryInfo(salaryForm.value)

// 页面回显的时候
if(addInfoStore.salaryInfo){
	salaryForm.value = addInfoStore.salaryInfo // 错误写法
}

// 正确写法
if(addInfoStore.salaryInfo){
    salaryForm.value.base = addInfoStore.salaryInfo.base
    salaryForm.value.deduct = addInfoStore.salaryInfo.deduct
    salaryForm.value.subsidy = addInfoStore.salaryInfo.subsidy
    salaryForm.value.merit = addInfoStore.salaryInfo.merit
    salaryForm.value.other = addInfoStore.salaryInfo.other
}
// 解构赋值的写法更优雅
if(addInfoStore.salaryInfo){
	const { base, deduct, subsidy, merit, other } = addInfoStore.salaryInfo
	salaryForm.value = { base, deduct, subsidy, merit, other }
}

记录问题：语法上没有区别，都是给salaryForm.value赋值。但是作用域上有些区别，根据你的赋值方式，可以清楚地知道每个属性的值从哪里来。此外，如果你需要更新多个属性，使用解构赋值的方式会更加清晰和简洁。而如果使用的是对象赋值的方式，那么对象中的所有属性都会被更新，可能不是你期望的行为。
具体涉及到堆栈https://blog.csdn.net/zhgweb/article/details/130807952