Блог

Мне нужно обновить реактивный объект некоторыми данными после выборки:

   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 }

Есть ли лучший способ сделать это?

Хотя решение Буссаджры Брахима работает, это не точный ответ на вопрос.

В том смысле, что реактивные данные не могут быть переназначены с = помощью, но это способ переназначения реактивных данных. Это так Object.assign .

Поэтому это должно сработать

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

Примечание: Решение — лучший способ, когда ваш реактивный объект пустой или всегда содержит одни и те же ключи; но если, например formData , имеет key x и data не имеет key x , то после Object.assign formData этого все равно будет иметь key x , так что строго не переназначать.

демонстрационный пример; включая просмотр

Согласно официальным документам :

Поскольку отслеживание реактивности Vue работает через доступ к свойствам, мы всегда должны сохранять одну и ту же ссылку на реактивный объект. Это означает, что мы не можем легко «заменить» реактивный объект, потому что связь реактивности с первой ссылкой потеряна

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 
        }
      })
    })

  }
 

Я думаю , что:

 formData = reactive(newObject)