vue.jsvuejs3quasar

Call a method from a Vue 3 watch that is in setup


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


Solution

  • 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.

    Same sample, but in options API