Helo, saya ada soalan: Dalam main.js, saya mempunyai fungsi global getSites
Fungsi ini berfungsi menggunakan async/menunggu dan mengembalikan data tapak secara tidak segerak.
Saya juga mempunyai pembolehubah global yang dipanggil lockSitesLoading yang saya tetapkan kepada benar apabila saya mula mendapat data daripada API, saya memerlukan pembolehubah ini untuk menghalang pelanggan daripada membuat permintaan baharu kepada pelayan.
Dalam fungsi pertama getSites, saya perlu menyemak pembolehubah ini lockSitesLoading dan jika ia benar, mula memantaunya sehingga ia berubah kepada palsu. Pada ketika ini, saya ingin memanggil getSites
Masalahnya bermula sekarang kerana apabila saya mula menonton pembolehubah, fungsi tidak menunggu pembolehubah menjadi palsu, tetapi mengembalikan
Berikut ialah kod saya:
Component.vue:
async mounted() { biarkan vm = ini; tapak const = menunggu vm.getSites(); vm.sites = tapak.data }, main.js:
async getSites() { biarkan vm = ini; if (vm.$store.state.lockSitesLoading) { vm.$watch('$store.state.lockSitesLoading', () => vm.getSites()); } lain { kembalikan vm._getSitesOnline(); //Ini adalah fungsi yang sebenarnya mendapat data daripada pelayan } Saya cuba menyelesaikannya dengan cara ini tetapi ia tidak berjaya. Ada idea?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya tidak tahu sama ada anda telah menyediakannya
lockSitesLoading = true, dan saya tidak tahu di mana anda telah menyediakannya.Berikut ialah contoh yang berkesan.
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; }Pada asasnya memerlukan janji untuk menunggu:
let unwatch; await new Promise(resolve => { unwatch = vm.$watch('$store.state.lockSitesLoading', loading => { if (!loading) { resolve(); } }, { immediate: true }); }); unwatch(); await vm._getSitesOnline();Sila ambil perhatian bahawa jika
lockSitesLoadingmenyekat pelaksanaan atas sebab tertentu, ini akan menyebabkan kebocoran ingatan.Mungkin terdapat cara yang lebih bersih untuk mencapai ini menggunakan komposisi API dan VueUse.