javascripttypescriptvuejs3vue-composition-api

How to properly reset Vue Composition Api's reactive values


I'm wondering how should I reset a reactive in vuejs setup? (i know if change it to the ref and using view.value will solve this problem, but there should be an answer to this for using reactive)

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
  }

Solution

  • You can use 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

    credits: taken from here