vue3 Object.assign重置reactive对象注意了

情景因为编辑的时候是回赋值id的 然后再点击新增会携带这个id 有时候如果是根据这个id来判断新增/编辑接口的话 就会只调用编辑接口 或者 新增携带id 也会请求失败

const onClose = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    //用对象的assign方法进行合并，Object.assign(需要重置的参数,计算方法返回的值)
    Object.assign(addOrUpdateParams, initAddOrUpdateParams());
};

const defaultSearchParams = (): StorePageParams => {
    return {
        name: '',
        personInCharge: '',
        phone: null,
        teamId: null,
        pageNum: 1,
        pageSize: 10,
    };
};

const searchParams = reactive<StorePageParams>(defaultSearchParams());

不用方法的话 也可以用 {…对象}

import { reactive, ref } from "vue";
 
//保存初始化数据
const initInputData = {
  datasourceName: "",
  driverClassName: "",
  url: "",
  userName: "",
  password: "",
  startYear: "",
  endYear: "",
  status: true,
  action: "submit",
  id: "",
  ip:'',
  port:''
}
const inputData = reactive({...initInputData});
 
//重置函数
const resetInputData = () => {
  Object.assign(inputData,initInputData)
}

点击弹窗关闭

解决1： 加上id 对重复的属性重置 （但是新增会多余一个空值）

解决方法二：重置单独删掉id

addOrUpdateParams.id && delete addOrUpdateParams.id

解决方法三：一个个赋值比较繁琐

 
const state = reactive({
  count: 0,
  name: 'John'
})
 
 
// 重置数据：
state.count = 0
state.name = 'John'

还好及时发现