如何正确重置 Vue Composition Api 反应值

Posted 2023-02-16

【中文标题】如何正确重置 Vue Composition Api 反应值

【英文标题】：How to properly reset Vue Composition Api's reactive values

【发布时间】：2020-07-25 19:50:28

【问题描述】：

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

【问题讨论】：

你弄明白了吗？也在找这个。

@InfoStatus 还没有，但你可以投票给这个问题更多的机会被其他人看到，所以我们终于得到了答案

小心，您的变量和类型名称存在命名冲突。变量应该是驼峰式以将它们与您的 PascalCased 类型分离

【参考方案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: "[e-mail]"
      );
    

    return  form, setForm, resetForm ;
  

See it live on codesandbox

学分：taken from here

【讨论】：

这是典型的方式，我希望有一个更好的答案来解决这个问题，但正如他们在 vue-next github 中所说的那样。似乎还没有更好的答案。谢谢你花时间在上面?

【参考方案2】：

来自官方 Vueland Discord 服务器：

“据我所知，响应式是我们使用 Classic API 进行响应式的旧方式，因此重置值应该类似于：”

const myData = reactive(
  foo: true,
  bar: ''
)

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

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

【参考方案3】：

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: "[e-mail]") 
        // only loop with the supported keys of initial state
        for (const key of Object.keys(initialState)) 
          form[key] = values[key]
        
    

    return  form, setForm, resetForm ;
  

【讨论】：

使用active wrap时如何重置数组？