javascript - 如何正确重置 Vue Composition Api react 值

Question

我想知道如何在 vuejs 设置中重置响应式(Reactive)？ (我知道是否将其更改为 ref 并使用 view.value 将解决这个问题，但应该有一个使用响应式的答案)

setup(props, context){
  // states
  const DataTable = reactive((null as unknown) as DataTable);
  const PolicyForm = reactive((null as unknown) as PolicyForm);
  let view = reactive(resetViewState());
  let config = reactive(
    (resetPreRegisterConfig() as unknown) as PreRegisterConfig
  );
  // methods:
  const fetchProfilelist = (
    pagination: Pagination{ page:1, size:15},
    sort_label: string = ""
  ) => {
    DataTable.fetchTablelist(api_fetchProfilelist, pagination, sort_label);
  };
  const pageRefresh = () => {
    view = resetViewState(); // 👈
    config = resetPreRegisterConfig();
    fetchProfilelist();

  };
  return {
    DataTable,
    PolicyForm,
    view,
    config,
    fetchProfilelist,
    pageRefresh
  }

Answer 1

您可以使用 Object.assign :

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

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

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

    function setForm() {
      Object.assign(form, {
        name: "John",
        lastName: "Doe",
        email: "john@doe.com"
      });
    }

    return { form, setForm, resetForm };
  }

See it live on codesandbox

学分: taken from here