How to return an observer from a global function in Vue 2

Question

Hello, I have a question: In main.js, I have a global function getSites that retrieves the list of sites from the API.

This function works using async/await and returns site data asynchronously.

I also have a global variable called lockSitesLoading which I set to true when I start getting data from the API, I need this variable to prevent the client from making new requests to the server.

In the first function getSites, I need to check this variable lockSitesLoading and if it is true, start monitoring it until it changes to false. At this point, I want to call getSites recursively.

The problem starts now because when I start watching the variable, the function does not wait for the variable to become false, but returns undefined.

Here is my code:

Component.vue:

async mounted() {
    let vm = this;
    const sites = await vm.getSites();
    vm.sites = sites.data
  },

main.js:

async getSites() {
      let vm = this;
      if (vm.$store.state.lockSitesLoading) {
        vm.$watch('$store.state.lockSitesLoading', () => vm.getSites());
      } else {
        return vm._getSitesOnline();
        //This is the function that actually gets the data from the server
      }

I tried solving it this way but it doesn't work. Any ideas?

Answer 1

I don’t know if you set lockSitesLoading = true, and I don’t know where you set it.

This is a working example.

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    sites: [],
    lockSitesLoading: false
  },
  actions: {
    async loadSites(context) {
        context.state.lockSitesLoading = true;    
        const sites = await context.dispatch('getSites');
        context.state.sites = sites.data;
        context.state.lockSitesLoading = false;    
    },
    async getSites(context) {
        return new Promise(function(resolve, reject){
          setTimeout(function(){
            resolve({ data: ['site1', 'site2', 'site3']})              
          },1000)
        })
      }    
  }
})

new Vue(
  { 
    el:'#app',
    store: store,
    async mounted() {
       await this.$store.dispatch('loadSites')
    },
    computed: {
      sites() { return this.$store.state.sites },
      lockSitesLoading() { return this.$store.state.lockSitesLoading }
    },
    watch: {
      lockSitesLoading(newVal, oldVal) {
          console.log(`lockSitesLoading: ${oldVal} -> ${newVal}`)
      }
    }    
  }
)

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
<div id="app" v-cloak>
  sites: {{sites}}<br/>
  lockSitesLoading: {{lockSitesLoading}}
</div>

Answer 2

Basically requires a promise to wait for:

let unwatch;

  await new Promise(resolve => {
    unwatch = vm.$watch('$store.state.lockSitesLoading', loading => {
      if (!loading) {
        resolve();
      }
    }, { immediate: true });
  });

  unwatch();

  await vm._getSitesOnline();

Please note that if lockSitesLoading blocks execution for some reason, this will cause a memory leak.

There may be a cleaner way to achieve this using the composition API and VueUse compositions.