如何从 Firestore 的 nuxt 中的 asyncData 返回一个数组以用于 SSR？答案

【问题标题】：How do I return an Array from asyncData in nuxt from firestore for SSR?如何从 Firestore 的 nuxt 中的 asyncData 返回一个数组以用于 SSR？
【发布时间】：2019-09-26 12:58:05
【问题描述】：

我正在尝试让我的应用使用 asyncData 在 SSR 中的 Firestore 中以数组形式呈现我的数据。我在 asyncData 之外的功能工作正常，但我无法让它在内部工作。

我尝试了很多方法来从 asyncData 获取数组以进行渲染。我试图将数据返回到“插件”，以便它以与我的方法相同的方式填写表格。

这是我的工作方法

async getAddons() {
      var addonsRef = db
        .collection('addons')
        .where('publish', '==', true)
        .orderBy('timeUpdated', 'desc');
      await addonsRef.get().then(snapshot => {
        snapshot.forEach(doc => {
          const addons = {
            ...doc.data(),
            id: doc.id
          };
          return this.addons.push(addons);
        });
      });
    },

这是我目前在 asyncData 中尝试的代码

async asyncData({ app, error }) {
    const addonsRef = await db
      .collection('addons')
      .where('publish', '==', true)
      .orderBy('timeUpdated', 'desc');
    try {
      await addonsRef.get().then(snapshot => {
        snapshot.forEach(doc => {
          const addons = {
            ...doc.data(),
            id: doc.id
          };
          return app.addons.push(addons);
        });
      });
    } catch (e) {
      // TODO: error handling
      console.error(e);
    }
    return app.addons.push(addons);
  },

我希望 asyncData 代码填充数组，以便它像 getAddons 函数一样填充我的模板。

我缺少什么简单的东西？

【问题讨论】：

app.addons.push(addons) 的结果是什么以及你如何在模板中引用它
根据 console.log 我得到一个空数组模板正在使用 {{addon.name}} 等。
这就是问题所在。你得到空数组。 asyncDAta 将在初始页面加载时在服务器上执行
这不是问题，这是预期的。但是应该返回将预呈现的数据。我已经将它用于执行单个调用且不要求收集的视图页面。
原来问题是用户错误。我试图在组件内部而不是在页面上使用 asyncData。参数。感谢@aldarund 的帮助

标签： arrays google-cloud-firestore nuxt.js server-side-rendering

【解决方案1】：

你应该从 asyncData 返回字典。例如。

{
 something:  app.addons.push(addons)
}

然后在模板中通过{{something. }}访问它

【讨论】：

试过了，但我仍然没有得到任何回报。