如何在Vue 2中全域函數中傳回一個觀察者

Question

你好，我有一個問題：在main.js中，我有一個全域函數getSites，用於從API中擷取網站清單。

這個函數使用async/await工作，並且非同步返回網站資料。

我還有一個全域變數叫做lockSitesLoading，當我開始從API中取得資料時，我將其設為true，我需要這個變數來防止客戶端向伺服器發出新請求。

在第一個函數getSites中，我需要檢查這個變數lockSitesLoading，如果它是true，就開始監視它直到它變成false。在這一點上，我想遞歸呼叫getSites。

問題現在開始了，因為當我開始監視變數時，這個函數並沒有等待變數變成false，而是回傳undefined。

這裡是我的程式碼：

組件.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();
        //這是實際從伺服器取得資料的函數
      }

我嘗試以這種方式解決，但不起作用。有什麼想法嗎？

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組合式可能有更簡潔的方法來實現這一點。