Estoy construyendo una aplicación web simple con Vue + Firebase + Vuefire y obtengo "Uncaught TypeError: No se puede leer la propiedad 'ref' de undefined" cuando intento usar mi variable db de Firebase dentro de un componente.

En main.js

Vue.use(VueFire)

const firebaseApp = Firebase.initializeApp({ //setting })

// Export the database for components to use.
export const db = firebaseApp.database()

Y en mi componente

// in Recipes.vue
import {db} from '../main.js'

export default {
  recipe: {
    source: db.ref('recipes')
    // Console says: "Uncaught TypeError: Cannot read property 'ref' of undefined"
  }
}

Seguí los pasos de este tutorial https://alligator.io/vuejs/vuefire-firebase/

Este código db.ref('recipes') funciona si se usa dentro de main.js, pero nunca funciona una vez que lo importo dentro de mi componente.

4
Fabrunet 13 nov. 2017 a las 00:02

2 respuestas

La mejor respuesta

El problema era que mi código de Firebase (incluida la variable db) estaba dentro de main.js pero tenía que estar en su propio componente. Creé un archivo firebase.js:

import Firebase from 'firebase'

const firebaseApp = Firebase.initializeApp({
  # configuration
})

// Export the database for components to use.
export const db = firebaseApp.database()

Luego, en mi componente, simplemente importé mi variable de base de datos:

import {db} from '../firebase'

¿Por qué no funcionó dentro de main.js? No estoy seguro, tal vez alguien con más conocimientos pueda responder a eso.

1
Fabrunet 16 nov. 2017 a las 02:18

.ref es una función de base de fuego, debes importarla. tratar

import Firebase from 'firebase'

O

import * from 'firebase'
0
Hareesh 13 nov. 2017 a las 05:04