Perhatikan perubahan pada sifat bersarang dalam Vue 3

Question

Saya mencipta pengurusan keadaan yang mudah dengan API reaktif

Fail kedai saya kelihatan seperti ini:

import { reactive, watch  } from "vue";

const state = reactive({
   form : {
    service_id : null
   }
})

 watch('state.form.service_id', (newVal, oldVal) => {
     console.log('service changed');
 }, { deep: true });
 

export default {
  state, 
}

Saya cuba melihat perubahan dalam state.form.service_id tetapi saya mendapat ralat berikut:

[Vue warn]: Sumber pemantauan tidak sah: state.form.service_id Sumber pemantauan hanya boleh berupa fungsi getter/effect, ref, objek tindak balas atau tatasusunan jenis ini

Jika saya menggantikan kod jam tangan dengan kod berikut maka ia berfungsi.

watch('state.form', (newVal, oldVal) => {
     console.log('form changed');
 }, { deep: true });

Tetapi saya perlu memberi perhatian kepada state.form.service_id perubahan. Adakah terdapat sebarang penyelesaian?

Answer 1

Cuba gunakan fungsi getter dan bukannya laluan harta benda:

 watch(()=>state.form.service_id, (newVal, oldVal) => {
     console.log('service changed');
 }, { deep: true });