Vuex/Firestore 从另一个集合中检索用户数据答案

【问题标题】：Vuex/Firestore retrieve user data from another collectionVuex/Firestore 从另一个集合中检索用户数据
【发布时间】：2023-03-05 01:55:01
【问题描述】：

我正在构建一个用户可以遵循课程的系统。用户可以关注课程，然后将 courseID 和 userID 添加到成员表中。我无法简单地列出关注该俱乐部的用户信息（名字、姓氏等）

我设法获取数据并在控制台记录它，但是当我提交到我的状态时，该状态只显示一个对象而不是我可以循环的数组。

我有以下收藏：

Users: -> auto-id -> { firstName, LastName etc. }
Courses: -> auto-id -> { courseName, courseLocation etc. }
Members: -> auto-id -> { courseID, userID etc. }

这是我在商店中的操作：

state: {
    members: []
},

mutations: {
    SET_MEMBER_DETAIL(state, val) {
      state.members = val
    },
},

actions: {
    retreiveMembers ({commit}, payload) {
        db.collection('members')
          .where('courseID', '==', payload.courseID)
          .get()
          .then(function (querySnapshot) {
            querySnapshot.forEach(function (doc) {
                const documents = doc.data()

                db.collection('users')
                  .doc(documents.userID)
                  .get()
                  .then((res) => {
                    console.log(res.data())
                    commit('SET_MEMBER_DETAIL', res.data())
                  })
            })
          })
    },
}

这是我控制台中的结果：

{admin: false, firstName: "Sam", lastName: "Staron"}

{admin: false, firstName: "Paul", lastName: "Staron"}

{admin: "Admin", firstName: "John", lastName: "Doe"}

当我通过 vue chrome add on 查看状态时，我只收到最后一个数组而不是全部 3 个并作为一个对象。

members:    Object
admin:      "Admin"
firstName:  "John"
lastName:   "Doe"

我想将控制台记录的结果作为一个数组提交到我的状态中，然后我可以在前端循环。

除非有更实用的方法来使用 Firestore 检索关系数据。

提前感谢任何人，山姆

【问题讨论】：

每次调用commit('SET_MEMBER_DETAIL', res.data()) 时，都会替换之前的SET_MEMBER_DETAIL 值。您需要将SET_MEMBER_DETAIL 实现为一个数组，然后将每个新成员推送给它。例如，请参阅此处答案中对push 的调用：stackoverflow.com/questions/41830731/…
我确实尝试过推送，但是每当我加载另一个课程配置文件时，它都会保存上一个课程的值并将用户复制到它。我有 3 个测试用户加入了这个俱乐部，离开并返回该页面时，我有 6 个：/
因此，每当您重新运行查询时，您都需要将一个空数组提交到列表中。像commit('SET_MEMBER_DETAIL', []) 就在querySnapshot.forEach 之前。
好的，谢谢您的反馈，我会试一试的。您是否可以推荐最佳/更好的做法来从不同的集合中获取用户相关数据？在我继续构建应用程序时，我可能需要重复此操作以检索相关的帖子/cmets 等。谢谢:)
您需要执行额外的文档加载以获取额外的数据，或者将数据复制到每个成员文档中。

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

【解决方案1】：

在您当前的代码中，每次调用 commit('SET_MEMBER_DETAIL', res.data()) 时，都会替换之前的 SET_MEMBER_DETAIL 值。您需要将SET_MEMBER_DETAIL 实现为一个数组，然后将每个新成员推送给它。例如，请参阅此处的答案中对push 的调用：Push to vuex store array not working in VueJS。

如果retreiveMembers 可能被多次调用，您将需要在重新运行查询时向列表提交一个空数组。在您当前的代码中，querySnapshot.forEach 之前的 commit('SET_MEMBER_DETAIL', []) 之类的东西。

【讨论】：