如何使用 vuex 操作将数据添加到 firebase 子集合？答案

【问题标题】：How to add data to firebase subcollection with vuex action?如何使用 vuex 操作将数据添加到 firebase 子集合？
【发布时间】：2021-04-28 13:20:19
【问题描述】：

我在实际操作中从 vuex 操作参数访问数据时遇到了一些问题。可能有更好的方法来做我想做的事情，但目前获取子集合所在的 doc id 的唯一方法是将其传递到 action 参数中。

这样做，我收到一条错误消息：“FirebaseError: Function CollectionReference.doc() 要求其第一个参数的类型为非空字符串，但它是：未定义”

当我在控制台中检查带有 Vue 扩展的组件中的 Vue 数据时，需求.id 在那里：

demandId:"AE5ba0IB1aCwlYDs42ir"

所以也许我得到了这个错误，因为 demandId 是字符串类型？在这一点上，我不确定在哪里寻找答案，也许有人可以指导我通过可能的解决方案？

Vue 组件：

props: ["demand", "modalId"],


data() {
    return {
      meetingForm: {
        demandId: this.demand.id,
        status: "pending",
        date: "",
        time: "",
        duration: null,
        note: ""
      }
    }
  },

//method:

submitModal(closeCallback) {
      const meeting = {
        demandId: this.meetingForm.demandId,
        status: "Pending",
        date: this.meetingForm.date,
        time: this.meetingForm.time,
        duration: this.meetingForm.duration,
        note: this.meetingForm.duration
      };
      // Dispatch action to create Meeting in DB
      this.$store
        .dispatch("meetings/createMeeting", meeting)
        .then(_ => {
          closeCallback();
          this.$toasted.success("Meeting has been succesfully created!", {
            duration: 3000
          });
        })
        .catch(e => console.error(e));
    }

Vuex 操作：

createMeeting( meeting) {
      meeting.createdate = Timestamp.fromDate(new Date())
      const demandId = meeting.demandId
      console.log(demandId)
      return db
        .collection('demands')
        .doc(this.demandId)
        .collection('meetings')
        .add(meeting)
      },

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

将 this.demandId 替换为 demandId

createMeeting( meeting) {
      meeting.createdate = Timestamp.fromDate(new Date())
      const demandId = meeting.demandId
      console.log(demandId)
      return db
        .collection('demands')
        .doc(demandId)
        .collection('meetings')
        .add(meeting)
      },

【讨论】：

您确定复制粘贴了我的答案吗？
是的，我再次尝试了同样的事情。我得到“未定义”到 console.log(demandId)

【解决方案2】：

Vuex API

动作类型：{ [类型：字符串]：函数}

在商店中注册操作。处理函数接收一个公开以下属性的上下文对象：

{ state, // 与 store.state 相同，如果在模块中，则为本地状态 rootState, // 与store.state 相同，仅在模块中 commit, // 等同于store.commit dispatch, // 等同于store.dispatch getters, // 与 store.getters 相同，如果在模块中，则为本地 getters rootGetters // 与store.getters 相同，仅在模块中 } 如果有，还会接收第二个有效载荷参数。

问题是我没有指定上下文。

【讨论】：