搜尋

首頁  >  問答  >  主體

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

我創建了一個帶有反應性 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 的變更。有什麼解決辦法嗎?

P粉060112396P粉060112396233 天前387

全部回覆(1)我來回復

  • P粉129275658

    P粉1292756582024-04-01 13:14:13

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

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

    回覆
    0
  • 取消回覆