Увеличение значения в Firestore с FieldValue в приложении Vue

Question

В настоящее время я пытаюсь обновить значение в документе в моей базе данных пожарного магазина на 1. После поиска некоторое время я нашел информацию о FieldValue.increment (1). Моя цель состоит в том, чтобы иметь форму с 2 полями (Host / Scout), и я введу в эти поля имя человека, которому потребуется увеличить значение своего хоста или разведчика. Вот так выглядит мой компонент 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:" Функция Query.where () требует допустимого третьего аргумента,но она не была определена. "

Я не знаю, почему я получаю эту ошибку или как я могу ее исправить. Может ли кто-нибудь указать мне правильное направление?

Answer 1

Существует как минимум 2 проблемы с кодом в его нынешнем виде:

• this.$route.params.host, вероятно, должно быть this.host, поскольку именно в этом случае Vue будет связывать параметр хоста. Это немедленный ответ на ваш первоначальный вопрос.

• Если предположить, что db создается из firebase.firestore(), это недопустимый способ ссылки на статический FieldValue для increment функция. Вам нужно получить его напрямую как firebase.firestore.FieldValue. Вам нужно каким-то образом импортировать этот символ в ваш код, поскольку сейчас firebase недоступен, поскольку он существует только в модуле firebaseInit.

Один из способовсделать этот импорт - просто добавить это в верхнюю часть вашего <script> раздела (есть другой способ, документированный в другом ответе):

import firebase from "firebase/app";

Обратите внимание, что счетчики могут в конечном итоге не масштабироватьсяс учетом предела скорости обновления для каждого документа в 1 обновление в секунду. В документации Firebase есть решение о том, как построить счетчики, распределенные по нескольким документам, как только вы перерастете это решение. Несмотря на это, это также показывает правильное использование increment в целом.

Answer 2

Для решения проблемы FieldValue.increment(1) вам необходимо экспортировать FieldValue в ваш файл firebaseInit следующим образом:

import firebase from "firebase/app"; 
import "firebase/firestore"; 
import firebaseConfig from "./firebaseConfig"; 

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
const fv = firebase.firestore.FieldValue;

export { db, fv };

Затем в вашем компоненте вы делаете:

import {db, fv} from "../data/firebaseInit";

//....
fv.increment(1)

---

Что касается второй проблемы, вы прочитаете в маршрутизаторе vue doc , что:

$ route.params

Объект, которыйсодержит пары ключ / значение динамических сегментов и сегментов звезды. Если параметров нет, значение будет пустым объектом.

Поскольку вы не передаете никаких пар ключ / значение в URL, вам необходимо использовать другое свойство объекта Route, например, $route.path

$ route.path

Строка, равная пути текущего маршрута, всегда разрешается как абсолютный путь. например, "/foo/bar".

следующим образом:

  db.collection("members")
    .where("name", "==", this.$route.path.substr(1))
    .get()
    ...