vue3自定义Hooks之状态重置(ref和reactive）

在进行表单操作时，通常会有状态重置操作，为了避免重复代码，实现类似于react的useState，进行快捷重置

useResetRef

import { ref } from "vue";

function defaultClone(value:any) {
  if (value == null || typeof value !== "object") return value;
  return JSON.parse(JSON.stringify(value));
}
export function useResetRef<T>(value: T) {
  const initialValue = defaultClone(value);
  const state = ref(value);
  const reset = () => {
    state.value = defaultClone(initialValue);
  };
  return [state, reset] as const;
}

useResetReactive

import { reactive } from 'vue';
function defaultClone(value: any) {
  if (value == null || typeof value !== 'object') return value;
  return JSON.parse(JSON.stringify(value));
}
function useResetReactive<T>(value: T) {
  const state = reactive(defaultClone(value));
  const reset = () => {
    //临时增加属性后，重置操作后删除属性
    Object.keys(state).forEach((key) => delete state[key]);
    Object.assign(state, defaultClone(value));
  };
  return [state, reset] as const;
}

使用方法

const [form, resetForm] = useResetReactive({
  name: '测试姓名',
  sex: '男',
  age: '18',
});

结语

总结于远方os