观察 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 });