typescript 如何正确重置Vue成分API的React性值

jckbn6z7  于 2022-12-27  发布在  TypeScript
关注(0)|答案(6)|浏览(196)

我想知道我应该如何在vuejs设置中重置一个reactive?(我知道如果将其更改为ref并使用view.value将解决这个问题,但应该有一个使用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
  }
vxf3dgd4

vxf3dgd41#

您可以使用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
制作者名单:从此处获取

tp5buhyn

tp5buhyn2#

Object.assign对我不起作用。(也许是因为我在Nuxtjs 2中的Composition API中使用了shim?)对于遇到同样问题的任何人:我不得不用一个紧凑的循环。

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

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

    function resetForm() {
        for (const [key, value] of Object.entries(initialState)) {
          form[key] = value
        }
    }

    function setForm(values = {name: "John", lastName: "Doe", email: "john@doe.com"}) {
        // only loop with the supported keys of initial state
        for (const key of Object.keys(initialState)) {
          form[key] = values[key]
        }
    }

    return { form, setForm, resetForm };
  }
xkftehaa

xkftehaa3#

引用自Vueland Discord官方服务器:

  • “据我所知,React式是我们在Classic API中执行React的老方法,因此重置值应类似于:“*
const myData = reactive({
  foo: true,
  bar: ''
})

function resetValues () {
 myData.foo = true
 myData.bar = ''
}

因此,如果不更改属性,应该可以使用Object.assign()。(如果我说错了,请纠正我)

fwzugrvs

fwzugrvs4#

用参比代替无功怎么样?

const myData = ref({ xxx: 11 })

// ... After many operations on myData 

// resetData
myData.value = { xxx: 11 }

缺点是在脚本中使用时需要添加.value。但这与vue模板中的React式相同。

zf9nrax1

zf9nrax15#

如果你有深层对象,你可以使用这个技巧来重置值,将它们转换成JSON

setup(){
    const form = ref({
      order: '',
      user:{},
    });
    const defaultForm = JSON.parse(JSON.stringify(form));
    form.value.user = {firstname:"Joe", lastname:"Doe"};
    const onSubmit = () => {
      // Reset values to default
      form.value = JSON.parse(JSON.stringify(defaultForm));
    }

}
1sbrub3j

1sbrub3j6#

如果您不想使用ref,而想重新设置reactive变量的值,则必须在React性变量中取一个关键变量作为参考,因为直接重新初始化React性变量会导致过程中React性丢失。
因此,要重置该值,请在React变量中使用额外的关键变量,见以下代码

setup() {

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

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

    function resetForm() {
      form.data = ...initialState;
    }

    function setForm() {
      form.data = {
        name: "Bahubali",
        email: "bahubali@mahismati.com"
      });
    }

    return { form, setForm, resetForm };
}

基本上,您将data作为无功变量的关键,当您想要重置或设置值时,只需更改form.data,它将是无功的,并刷新使用form.data的元件。

相关问题