我如何 return 来自 firestore 的 nuxt 中的 asyncData 的数组用于 SSR？

Question

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

我已经尝试了很多方法来从 asyncData 获取数组以进行渲染。我试图将数据 return 放到 'addons' 上，这样它就可以像我的方法一样填写表格。

这是我的工作方法

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 函数一样填充我的模板。

我缺少什么简单的东西？

Answer 1

你应该 return 来自 asyncData 的字典。例如。

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

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

访问它