Nuxt 2.14：等待`fetch`中的所有内容都完成

Question

我有一个问题。在 Nuxt 的

fetch

钩子内，我有一些由 Nuxt content API 执行的异步调用。

此数据的某些片段将在

mounted

钩子内使用。

但是，当 Nuxt 处理

fetch

内的第一个请求时，控制流会传递到

mounted

钩子，因此不需要数据。

是的，我尝试使用类似

if (!this.$fetchState.pending) return;

的东西，但显然

mounted

只被调用一次。有谁知道我怎样才能强迫 Nuxt 等待？顺便说一句，该应用程序正在使用静态站点生成，并且该组件的属性

fetchOnServer

设置为 false。

Answer 1

将其留在这里以供将来参考（我自己）：在您的

fetch

函数中，您可以将实例变量设置为远程调用完成后将解决的承诺，然后在

mounted

中等待该变量。

        export default {
            name: 'Search',
            data () {
                    const core = useCore();             
                    var data = {
                            source: null,
                            fetching: false,
                    };
                    return data;
            },
            fetch: async function(){
var self = this;
                    this.fetching = new Promise(async function(resolve, reject){
                            try{
                                    var req = await self.$axios.get("https://example.com/source.json");
                                    self.source = req.data;
                                    resolve();
                            }catch(err){
                                    console.log("Exception loading remote source: ", err);
                            }
                    });
        },
        fetchOnServer: false,       
            mounted: async function()
            {
                    if(this.fetching) await this.fetching;
            }
    }