Vue js 3 将产品添加到 Firebase 时出错

Question

我在为我们的商店创建网站时正在学习 Vuejs，我在连接 Firebase 时遇到问题，身份验证工作正常，但 CRUD 没有，它给了我这个错误：

Uncaught SyntaxError: Unexpected reserved word (at Products.vue...)

版本：

• Vue：3.2.36
• 火力基地：9.8.3

代码：

import { db } from '../main';
import { collection, addDoc } from "firebase/firestore";

export default {
  name: "Products",
  props: {
    msg: String
  },
  data() {
    return {
      product: {
        name: null,
        price: null
      }
    }
  },
  methods: {
    saveData() {
      try {
        const docRef = await addDoc(collection(db, "products"), this.product);
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }

    }
  }
};

Answer 1

这一定是由于您的代码中的一些错误。 每当您遇到此类错误时，标准程序是检查您的代码以指出哪一行恰好引发了错误。

另外，我注意到您正在使用没有“异步”功能的“等待”。 'await' 使函数异步，因此必须在异步函数中声明它。 在函数中使用 async await 是链接 Promise 的简写，相当于调用一个 then 函数链并在 then 函数的每个回调中返回一个 Promise。

另外，你可以参考这个文档，它指导如何在 Vue.js 中使用 async 和 await。