时间戳

首页 > 解决方案 > Vuex/Firestore 从另一个集合中检索用户数据

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

问题描述

我正在构建一个系统，用户可以在其中学习课程。用户可以关注课程，然后将 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 检索关系数据。

提前感谢任何人，山姆

标签： javascriptvue.jsgoogle-cloud-firestorevuex

解决方案

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

如果retreiveMembers可能被多次调用，那么每当您重新运行查询时，您都需要将一个空数组提交到列表中。在您当前的代码中就像commit('SET_MEMBER_DETAIL', [])以前一样。querySnapshot.forEach

推荐阅读