如何在Vue 2中全局函数中返回一个观察者

Question

你好，我有一个问题：在main.js中，我有一个全局函数getSites，用于从API检索站点列表。这个函数使用async/await工作，并异步返回站点数据。我还有一个全局变量叫做lockSitesLoading，当我开始从API获取数据时，我将其设置为true，我需要这个变量来防止客户端向服务器发出新请求。在第一个函数getSites中，我需要检查这个变量lockSitesLoading，如果

P粉788571316 · Answer

不清楚你是否设置了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; }




  sites: {{sites}}

  lockSitesLoading: {{lockSitesLoading}}

P粉063039990 · Answer

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

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组合式可能有更简洁的方法来实现这一点。