使用 Vue 将数据写入 Firebase

Posted 2023-02-22

【中文标题】使用 Vue 将数据写入 Firebase

【英文标题】：Writing data to Firebase using Vue

【发布时间】：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 语句。另外，您能否明确提及您遇到的任何错误或您遇到的困难？

【参考方案1】：

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

import db from 'firebase/init.js

然后添加文档...

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

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

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

【讨论】：

成功了！非常感谢