Vue.js 3 - 替换/更新反应性对象而不会失去反应性

Question

获取后，我需要使用一些数据更新反应对象：

  setup(){
    const formData = reactive({})

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          formData = data //how can i replace the whole reactive object?
        }
      })
    })
  }

formData = data 不会工作，而且 formData = { ...formdata, data }

有一个更好的方法吗？

Answer 1

尽管 Boussadjra Brahim 的解决方案有效，但它并不是问题的确切答案。

从某种意义上说，反应数据不能重新分配，=但它们是重新分配反应数据的一种方式。它是Object.assign。

因此这应该工作

    setup(){
        const formData = reactive({})
    
        onMounted(() => {
          fetchData().then((data) => {
            if (data) {
              Object.assign(formData, data) // equivalent to reassign 
            }
          })
        })
      }

注意：当你的反应对象为空或总是包含相同的键时，解决方案是最好的方法；但是如果 egformData有key x和data没有key x然后 after Object.assign，formData仍然会有key x，所以不是严格不重新分配。

Answer 2

reactive 应该定义一个带有嵌套字段的状态，这些字段可以像以下那样进行变异：

 setup(){
    const data= reactive({formData :null })

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          data.formData = data 
        }
      })
    })

  }

或者如果您只有一个嵌套字段，请使用 ref ：

  setup(){
    const formData = ref({})

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          formData.value = data 
        }
      })
    })

  }