如何在 v-for 循环中有效地访问 Firestore 数据答案

【问题标题】：How to efficiently access firestore data within a v-for loop如何在 v-for 循环中有效地访问 Firestore 数据
【发布时间】：2021-11-22 12:06:19
【问题描述】：

我们的应用程序中有一个布局，供用户应用程序处理事件。我们在 v-for 循环中列出这些应用程序。然而，我们确实需要从我们的用户集合中引用一些关于该布局的额外数据。我们可以通过过滤用户集合来实现这一点，但这太慢了。

这是有效的代码，但速度太慢（有 20K 用户），网站无法使用。

<span v-for="u in filteredInfo(props.row)">
                <span v-if="u && u.skills && u.skills.length > 0" style="display:inline;">
                  <v-popover>
                    <i class="fad fa-briefcase"></i>
                    <template slot="popover">
                    <span v-for="z in u.skills">{{z.title}} / </span>
                  </template>
                  </v-popover>
                </span>
              </span>
            </span>

然后：

filteredInfo(user) {
 return this.users.filter(member => {
    return member.id == user.userId
  })
}

如果我正确理解发生了什么，我的 v-for 循环中的每个应用程序都必须过滤 20K 用户以查找并加载正确的用户数据……在这种情况下，列出他们的技能。

为了加快这个布局的性能，直接调用用户数据不是更有帮助吗？这是我要开始工作的代码，但它没有显示 v-for 循环中的数据。

filteredInfo(user) {
 fb.usersCollection.doc(user.userId).get()
  .then(doc => {
    console.log(doc.data());
    return doc.data()
  })
}

我的第二种方法（以上）会加快页面速度吗？如果是这样，我需要做什么才能使其正常工作？

谢谢！

【问题讨论】：

v-for 中使用了哪个filteredInfo() 函数？
第一个有效，只是网站变得非常慢。我想让它更快的想法是使用第二个代码，但它不起作用。
在第一个函数中，假设Id是唯一的，为什么不使用find()呢？
喜欢这个？返回 this.users.find(member => { return member.id == user.userId })
是的，但您真的需要一次列出所有用户吗？分页始终是一种选择。

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

问题在于查询的大小。

你可以：

按名称的第一个字母等参数划分用户。这样您将拥有 20 个较小的文档。
为每个用户使用 1 个文档并使用以下方法进行查询：

Limit and order

或

Paginate

【讨论】：

谢谢丹尼尔...我明白了。我们无法直接访问文档（我的第二个代码）。相反，我们应该尝试将用户集合分解为更小的集合？
是的，问题是进行 20.000 次查询或 1 次查询 20.000 个用户。问题是在每个查询中获得大量用户（不要太多，也不要太少），只在你需要的时候。如果每个文档有一个用户，那么您可以使用分页查询多个文档。