javascript - 在 Vue App 上使用 FieldValue 增加 Firestore 的值(value)

Question

我目前正在尝试将我的 firestore 数据库中文档的值更新为 1。搜索一段时间后，我发现了 FieldValue.increment(1)。我的目标是拥有一个包含 2 个字段(主持人/侦察员)的表单，我将在这些字段上输入需要增加主持人或侦察员值(value)的人的姓名。这是我的 vue 组件的样子

<template>
  <div class="add-wave">
    <h3>Add Wave</h3>
    <div class="row">
      <form @click.prevent="addwave()" class="col s12">
        <div class="row">
          <div class="input-field col s12">
            <input type="text" v-model="host" />
            <label class="active">Host</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input type="text" v-model="scout" />
            <label class="active">Scout</label>
          </div>
        </div>
        <button type="submit" class="btn">Submit</button>
        <router-link to="/member" class="btn grey">Cancel</router-link>
      </form>
    </div>
  </div>
</template>

<script>
import db from "../data/firebaseInit";
export default {
  data() {
    return {
      host: null,
      scout: null
    };
  },
  methods: {
    addwave() {
      db.collection("members")
        .where("name", "==", this.$route.params.host)
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            doc.ref
              .update({
                host: db.FieldValue.increment(1)
              })
              .then(() => {
                this.$router.push({
                  name: "member",
                  params: { name: this.name }
                });
              });
          });
        });
    }
  }
};
</script>

一切都可以编译，但是每当我尝试在每个输入字段中输入一个名称时，我都会收到错误消息“FirebaseError:“Function Query.where() 需要一个有效的第三个参数，但它是未定义的。”

我不知道为什么会收到此错误或如何修复它。谁能指出我正确的方向？

Answer 1

目前的代码至少存在两个问题:

• this.$route.params.host应该是 this.host ，因为这是 Vue 将绑定(bind)主机参数的地方。这是对您最初问题的直接回答。

• 假设 db从 firebase.firestore() 创建, 它不是引用静态 FieldValue 的有效方式对于 increment功能。您需要直接将其获取为 firebase.firestore.FieldValue .您需要以某种方式将此符号导入您的代码，因为现在 firebase无法访问，因为它仅存在于 firebaseInit 中模块。

执行此导入的一种方法是将其添加到 <script> 的顶部部分(另一个答案中记录了另一种方式):

import firebase from "firebase/app";

另请注意，鉴于每个文档的更新速率限制为每秒 1 次更新，计数器最终可能无法缩放。 firebase 文档有一个 solution了解一旦超出此解决方案，如何构建分布在多个文档中的计数器。无论如何，这也表明正确使用了 increment一般。