vue 3 наблюдает за отдельным свойством состояния

#vue.js #vuejs3 #vue-composition-api

Вопрос:

Моя функция настройки:

   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 ?

Ответ №1:

Вы не можете создать ссылку из свойства такого реактивного объекта. Эта строка:

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

Вместо этого вы можете передать функцию получения в качестве первого аргумента для просмотра, которая возвращает значение:

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

Вот рабочий пример для демонстрации

Вы также могли бы сначала вызвать toRefs(state) и передать ссылку venueFilter, созданную на основе этого.