vue.js - 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),
      //.....
    }
  }

当模板中的 state.venueFilter 更改时，上面的 watch 不会被触发(console.log('invoked watch'); 不会被打印。那么如何我要观看 state.venueFilter 吗？

Answer 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) 并传入从中创建的venueFilter ref。