无法读取未定义的属性“ref”

Question

我正在使用 Vue + Firebase + Vuefire 构建一个简单的网络应用程序，当我尝试在内部使用 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') 可以工作，但是一旦我将它导入到我的组件中，它就不会工作。

Answer 1

问题是我的 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 中不起作用？我不确定，也许有更多知识的人可以回答这个问题。

Answer 2

.ref是firebase函数，需要导入。试试

import Firebase from 'firebase'

或

import * from 'firebase'