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) =&gt; {
     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 }
}