I'm using Quasar and I'm moving from Vue 2 to Vue 3 and having a problem with watching a value that changes in a store file.
I have a layout page that has a select dropdown that changes the value of my background object in a store.
store.methods.changeBackGround(geoBackgroundSelected.value)
I can read that on the inserted page with
{{ store.state.geoBackgroundSelected }}
and I do have
import { ref , inject, computed, watch} from 'vue'
I have a watch added to my setup like :
setup(){
watch(() => store.state.geoBackgroundSelected, function() {
console.log('value changes detected');
console.log(store.state.geoBackgroundSelected)
checkStore('watch')
});
},
But I can't call checkStore('watch') I have a button that calls checkstore('button") and that works fine. The console.log shows the the new value of store.state.geoBackgroundSelected but I get an error calling checkStore of.
Uncaught (in promise) ReferenceError: checkStore is not defined
if I use this.checkStore I get:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'checkStore')
I've tried using
watch:{
geoBackground:{
handler(){
console.log('watch')
console.log(geoBackground)
},
deep: true
},
But that does not get called. I've tried replacing geoBackground with store.state.geoBackgroundSelected but that does not like the .'s.
Is my problem with my store? my watchers?
Thanks in advance
Do you have checkStore
method implemented as options API? I think you should either implement it in setup
, or setup a watcher with Options API format.
I did setup small demo on playground. It implements a method that is accessible by both watcher and button while using Composition API.