vue 3 观看个人状态 属性

Question

我的设置函数：

  setup() {

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


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

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

上面的手表没有被触发（console.log('invoked watch'); 没有在模板中 state.venueFilter 更改时打印出来。那么我该如何观看 state.venueFilter？

Answer 1

您不能从 属性 这样的反应对象进行引用。这一行：

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

相反，您可以传入一个 getter 函数作为第一个参数来观察 returns 一个值：

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

Here's a working example to demonstrate

您也可以先调用 toRefs(state) 并传入由此创建的 venueFilter 引用。