Question

我正在使用Vue + Firebase + Vuefire构建一个简单的Web应用程序，我得到＆＃34; Uncaught TypeError：无法读取属性＆＃39; ref＆＃39;当我尝试在组件中使用我的Firebase数据库变量时，未定义＆＃34; 。

在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'

无法阅读财产＆＃39; ref＆＃39;未定义的

在main.js

在我的组件中

2 个答案: