4

我正在使用 Vue + Firebase + Vuefire 构建一个简单的 Web 应用程序,当我尝试在组件中使用我的 Firebase db 变量时,我得到“Uncaught TypeError: Cannot read property 'ref' of undefined” 。

在 main.js

Vue.use(VueFire)

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

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

在我的组件中

// 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"
  }
}

我按照本教程中的步骤https://alligator.io/vuejs/vuefire-firebase/

如果在 main.js 中使用此代码,则此代码db.ref('recipes')有效,但一旦我将其导入组件中,它就永远无法工作。

4

2 回答 2

2

问题是我的 Firebase 代码(包括 db 变量)在里面main.js,但它需要在它自己的组件中。我创建了一个firebase.js文件:

import Firebase from 'firebase'

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

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

然后在我的组件中,我只是导入了我的数据库变量:

import {db} from '../firebase'

为什么它在里面不起作用main.js?我不确定,也许有更多知识的人可以回答这个问题。

于 2017-11-16T02:18:45.443 回答
0

.ref是一个firebase函数,你需要导入它。尝试

import Firebase from 'firebase'

或者

import * from 'firebase'
于 2017-11-13T05:04:48.633 回答