使用 Vue 将数据写入 Firebase答案

【问题标题】：Writing data to Firebase using Vue使用 Vue 将数据写入 Firebase
【发布时间】：2022-01-11 11:03:41
【问题描述】：

请帮忙。我已经尝试了几天，观看了无数教程，并在 Firebase 文档上尝试了不同的方法组合，但似乎没有任何效果。

我正在构建一个 Vue 聊天项目并尝试将数据写入 firebase 数据库。我firebase/init.js中的代码如下：

import { initializeApp } from "firebase/app";
import { getFirestore} from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  measurementId: "XXXXXXXXXXXXXXXXXXXXXXXXXX"
};


const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

export default db;

我的 CreateMessage.vue 文件中的代码如下：

<script>
import {collection, addDoc} from "firebase/firestore";
export default {
    name: 'CreateMessage',
    props: ['name'],
    data() {
        return {
            newMessage: null,
            errorText: null
        }
    },
    methods: {
        createMessage () {
            if (this.newMessage != "") {
                addDoc(collection(firestore, "messages"),{
                    message: this.newMessage,
                    name: this.name,
                    timestamp: Date.now()
                });
                this.newMessage = null;
                this.errorText = null;
            } else {
                this.errorText = "A message must be entered first!";
            }
        }
    }    
}
</script>

任何帮助将不胜感激。提前非常感谢大家。

【问题讨论】：

组件 CreateMessage 中缺少 import db 语句。另外，您能否明确提及您遇到的任何错误或您遇到的困难？

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

您从 init.js 文件中导出的唯一内容是 db。而且你永远不会将 db 导入到你的组件中。应该这样导入

import { db } from 'firebase/init.js

然后添加文档...

addDoc(collection(db, 'messages'), ...

或者，您不必导入 db.您也可以从 firebase/firestore 导入 getFirestore 并执行...

addDoc(collection(getFirestore(), 'messages'), ...

【讨论】：

成功了！非常感谢