vue 3 监视单个状态属性

【问题标题】：vue 3 watch individual state propertyvue 3 监视单个状态属性
【发布时间】：2021-10-21 16:30:41
【问题描述】：

我的设置函数：

  setup() {

    const state = reactive({
      // .....
      venueFilter: null,
    })


    const venueFilter = ref(state.venueFilter);
    watch(venueFilter, ()=> {
      console.log('invoked watch');
      if(venueFilter) {
        doSomething();
      }
    });

    return {
      ...toRefs(state),
      //.....
    }
  }

上面的手表没有被触发（当state.venueFilter在模板中发生变化时，console.log('invoked watch');没有被打印出来。那么我如何看state.venueFilter呢？

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

您不能像这样从反应性对象的属性中创建引用。这一行：

const venueFilter = ref(state.venueFilter); //venueFilter will not react to changes in state.venueFilter

相反，您可以传入一个 getter 函数作为 watch 返回值的第一个参数：

watch(()=>state.venueFilter, ()=> {
  console.log('invoked watch');
});

Here's a working example to demonstrate

您也可以先调用 toRefs(state) 并传入由此创建的场地过滤器引用。

【讨论】：