Beobachten Sie Änderungen an verschachtelten Eigenschaften in Vue 3

Question

Ich habe eine einfache Statusverwaltung mit reaktiver API erstellt

Meine Store-Datei sieht so aus:

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

Ich versuche, Änderungen in state.form.service_id zu beobachten, erhalte jedoch die folgende Fehlermeldung:

[Vue-Warnung]: Ungültige Überwachungsquelle: state.form.service_id Überwachungsquellen können nur Getter-/Effektfunktionen, Refs, Reaktionsobjekte oder Arrays dieser Typen sein

Wenn ich den Uhrencode durch den folgenden Code ersetze, funktioniert es.

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

Aber ich muss auf die state.form.service_idÄnderungen achten. Gibt es eine Lösung?

Answer 1

尝试使用 getter 函数而不是属性路径：

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