你好，我有一个问题：在main.js中，我有一个全局函数getSites，用于从API检索站点列表。
这个函数使用async/await工作，并异步返回站点数据。
我还有一个全局变量叫做lockSitesLoading，当我开始从API获取数据时，我将其设置为true，我需要这个变量来防止客户端向服务器发出新请求。
在第一个函数getSites中，我需要检查这个变量lockSitesLoading，如果它为true，就开始监视它直到它变为false。在这一点上，我想递归调用getSites。
问题现在开始了，因为当我开始监视变量时，这个函数并不等待变量变为false，而是返回undefined。
这里是我的代码：
组件.vue：
2
1005async 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();
//这是实际从服务器获取数据的函数
}
我尝试以这种方式解决，但不起作用。有什么想法吗？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
不清楚你是否设置了
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>基本上需要一个等待的承诺：
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组合式可能有更简洁的方法来实现这一点。