#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, созданную на основе этого.