vue3.0中怎么重置reactive定义的数据，恢复为初始值？

Question

const dialogModel = reactive<AddDeptModel>({
    type: "",
    id: "",
    pid: "",
    parentName: "",
    manager: "",
    deptAddress: "",
    deptPhone: "",
    name: "",
    deptCode: "",
    orderNum: "",
  });

比如有一个弹出里的数据是reactive定义的，您填写数据，如果关闭弹窗，然后在打开弹窗，之前的填的还会显示，有啥方便的方法重置呢，vue2我是用this.$options.data()重置为初始值。

Answer 1

定义一个重置方法

const resetData = () => {
  const keys = Object.keys(dialogModel)
  let obj: { [name: string]: string } = {}
  keys.forEach((item) => {
    obj[item] = ""
  })
  Object.assign(dialogModel, obj)
};

Answer 2

可以试一下这种方法

const initData:AddDeptModel = {
    type: "",
    id: "",
    pid: "",
    parentName: "",
    manager: "",
    deptAddress: "",
    deptPhone: "",
    name: "",
    deptCode: "",
    orderNum: "",
  }
const dialogModel = reactive<{data:AddDeptModel}>({data:{...initData}});

// 初始化方法
const resetDialogModel = () =>{
    dialogModel.data = {...initData}
}

Answer 3

可以这么使用

const initialState = {
  name: "",
  lastName: "",
  email: ""
};

const form = reactive({ ...initialState });

function resetForm() {
  Object.assign(form, initialState);
}

Answer 4

• 当需要重置的时候建议使用ref,当然使用reactive也差不多，可以使用toRaw读取初始值做一份备份保留后续使用

  const form = ref( {
  name: "",
  lastName: "",
  email: ""
  });
  const _form =toRaw(form.value)
  
  function resetForm() {
  form.value=_form
  }

Answer 5

vue3没有提供像this.$options.data() 这种方便的方法，只能自己实现一种较为方便的来用，实现方式已经有几位师兄回答了

Answer 6

const initialState = () => ({
  foo: 0,
})
const state = reactive(initialState())
// 重置
Object.assign(state, initialState())

// 如需复用，可将重置语句包装进函数
function initState() {
  Object.assign(state, initialState())
}