觀察 Vue 3 中嵌套屬性的變化

Question

我創建了一個帶有反應性 API 的簡單狀態管理

我的商店文件如下所示：

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

我試圖觀察 state.form.service_id 中的變化，但出現以下錯誤：

[Vue warn]: 無效的監視來源：state.form.service_id 監視來源只能是 getter/effect 函數、ref、反應物件或這些類型的陣列

如果我用以下程式碼替換手錶程式碼，那麼它就可以工作。

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

但我需要注意 state.form.service_id 的變更。有什麼解決辦法嗎？

Answer 1

嘗試使用 getter 函數而不是屬性路徑：

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