// db.js file import * as firebase from "firebase/app" import "firebase/database" const config = { apiKey: "" ... } const db = firebase.initializeApp(config) export default db // App.vue file import { reactive, onMounted, ref } from 'vue' import db from "./db.js"; const SendMessage = () => { const messagesRef = db.database().ref("messages") if(inputMessage.value === "" || inputMessage.value === null) { return } const message = { username: state.username, content: inputMessage.value } messagesRef.push(message) inputMessage.value = "" }Intento hacer una pequeña aplicación de chat con Vue.js y Firebase. Así que no entiendo porque recibo esto cuando intento enviar un mensaje: db_js__WEBPACK_IMPORTED_MODULE_1 _.default.database no es una función en Proxy.SendMessage (App.vue?3dfd:63:1)
Creo que se trata de la importación, pero trato de cambiar por el V9 de Firebase, pero eso no funcionó.
Firebase V9 tiene un enfoque funcional integrado. Estoy trabajando con firestore, por lo general me da una señal si algo no funciona.
db.js
import { initializeApp } from 'firebase/app'; import { getDatabase, ref, push, child, serverTimestamp } from 'firebase/database' const config = { apiKey: "" ... } const firebase = initializeApp(config) const db = getDatabase() function addMessage(path, message) { message.createAt = serverTimestamp() // On database side database will assign current // timestamp to this field so you will be able to order data // from newest to oldest for example. return push(child(ref(db, path)), message) } export { addMessage }Archivo App.vue
import { reactive, onMounted, ref } from 'vue' import { addMessage } from "./db.js"; const SendMessage = async () => { if (!inputMessage.value) return // line above will check are value is "" or null by throwing // false and using ! in front you changing it to true. const message = { username: state.username, content: inputMessage.value } const result = await addMessage('path to data in tree', message) // async/await will await until data is saved in database and then will do code bellow. console.log(result.key) // If you await you can read result if result is not void. inputMessage.value = "" } Si usa ref() en archivos .vue, haga que las operaciones de la base de datos fuera de la base de datos de archivos vue tengan la misma función ref() pero funcionan de manera diferente. También puede cambiar el nombre de una función en la importación de línea de import { ref as dbRef } from 'firebase/database'