Observer les modifications apportées aux propriétés imbriquées dans Vue 3

Question

J'ai créé une gestion d'état simple avec API réactive

Ma fiche boutique ressemble à ceci :

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

J'essaie d'observer les changements dans state.form.service_id mais j'obtiens l'erreur suivante :

[Vue warn] : Source de surveillance non valide : state.form.service_id Les sources de surveillance ne peuvent être que des fonctions getter/effet, des références, des objets de réaction ou des tableaux de ces types

Si je remplace le code de la montre par le code suivant, cela fonctionne.

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

Mais je dois faire attention aux state.form.service_id changements. y-a-t'il une solution?

Answer 1

Essayez d'utiliser les fonctions getter au lieu des chemins de propriété :

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