我創建了一個帶有反應性 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粉1292756582024-04-01 13:14:13
嘗試使用 getter 函數而不是屬性路徑:
watch(()=>state.form.service_id, (newVal, oldVal) => { console.log('service changed'); }, { deep: true });