Firebase - Vue 数据库集成不起作用

Posted 2023-02-22

【中文标题】Firebase - Vue 数据库集成不起作用

【英文标题】：Firebase - Vue database integration not working

【发布时间】：2021-10-29 23:52:41

【问题描述】：

我正在尝试将 Firebase 与 Vue 4 应用程序集成，目前出现以下错误。

未捕获的类型错误：db__WEBPACK_IMPORTED_MODULE_1_.default.database 不是函数

我正在使用 “火力基地”：“^9.0.0” “vue”：“^3.0.0”

import  initializeApp  from "firebase/app";
import  getDatabase  from "firebase/database";


const firebaseConfig = 
// keys
;

const app = initializeApp(firebaseConfig);

const db = getDatabase(app);

export db

我的函数调用如下

import reactive from 'vue';
import  ref, set, push  from "firebase/database";
import db from "./db"


export default 
  setup()
    const inputUsername = ref("");
    const inputMessage = ref("");
    const state = reactive(
        username: "",
        messages:[]
    );

    const Login = () =>
      if(inputUsername.value != "" || inputUsername.value != null)
       state.username = inputUsername.value;
       inputUsername.value = "";
      
    
    const SendMessage = () => 
    //   const messagesRef = db.database().ref("messages");
      if (inputMessage.value === "" || inputMessage.value === null) 
        return;
      
      const message = 
        username: state.username,
        content: inputMessage.value
      
      set(push(ref(db, 'messages')), message);

    //   messagesRef.push(message);
      inputMessage.value = "";
    
    return
    inputUsername,
    Login,
    state,
    inputMessage,
    SendMessage
    
  

我尝试了以下the following suggestion ，但没有成功。

谢谢！

【参考方案1】：

新的模块化 SDK 不再使用命名空间。所以你不能使用app.database()。您可以简单地从初始化 Firebase 的文件中导出数据库实例，如下所示：

import  initializeApp  from "firebase/app";
import  getDatabase  from "firebase/database";

const app = initializeApp(firebaseConfig);

const db = getDatabase(app);

export db

然后在需要的地方导入并使用它：

import  ref, child, get  from "firebase/database";
import db from "../path/to/firebase.js"

const message = 
  username: state.username,
  content: inputMessage.value


set(push(ref(db, 'messages')), message);

您可以在documentation中了解有关新语法的更多信息

---

未捕获的类型错误：db._checkNotDeleted 不是函数

出现此错误的原因是您从firebase 和vue 导入ref。请将 Firebase 的 ref 导入为 fireRef。

import  reactive, ref  from "vue";
import  ref as fireRef, set, push  from "firebase/database";
import  db  from "./db";

// usage 
set(push(fireRef(db, "messages")), message);

【讨论】：

感谢您的回答，但我在此实现中遇到错误。未捕获的类型错误：db._checkNotDeleted 不是函数

@V5NXT 这对我来说听起来像是一个不同的问题。您的代码没有 checkNotDeleted 函数

你确定吗？它是“db”对象的一个​​函数。

@V5NXT 你能分享代码的相关部分吗？

我已经用整个组件和您的更改更新了问题。