So geben Sie einen Beobachter von einer globalen Funktion in Vue 2 zurück

Question

Hallo, ich habe eine Frage: In main.js habe ich eine globale Funktion getSites, die die Liste der Websites von der API abruft.

Diese Funktion verwendet async/await und gibt Site-Daten asynchron zurück.

Ich habe auch eine globale Variable namens lockSitesLoading, die ich auf true setze, wenn ich anfange, Daten von der API abzurufen. Ich benötige diese Variable, um zu verhindern, dass der Client neue Anfragen an den Server stellt.

In der ersten Funktion getSites muss ich diese Variable lockSitesLoading überprüfen und, wenn sie wahr ist, mit der Überwachung beginnen, bis sie sich in falsch ändert. An dieser Stelle möchte ich getSites rekursiv aufrufen.

Das Problem beginnt jetzt, denn wenn ich anfange, die Variable zu beobachten, wartet die Funktion nicht darauf, dass die Variable falsch wird, sondern gibt undefiniert zurück.

Hier ist mein Code:

Component.vue:

async mount() {
    let vm = this;
    const sites = waiting 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());
      } anders {
        return vm._getSitesOnline();
        //Dies ist die Funktion, die tatsächlich die Daten vom Server erhält
      }

Ich habe versucht, es auf diese Weise zu lösen, aber es funktioniert nicht. Irgendwelche Ideen?

Answer 1

不清楚你是否设置了lockSitesLoading = true，也不清楚你在哪里设置了。

这是一个可工作的示例。

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

基本上需要一个等待的承诺：

let unwatch;

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

  unwatch();

  await vm._getSitesOnline();

请注意，如果lockSitesLoading由于某种原因阻止执行，这将导致内存泄漏。

使用组合API和VueUse组合式可能有更简洁的方法来实现这一点。