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

Posted 2023-02-22

【中文标题】无法读取未定义的属性“ref”

【英文标题】：Cannot read property 'ref' of undefined

【发布时间】：2018-04-25 12:31:32

【问题描述】：

我正在使用 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') 可以工作，但是一旦我将它导入到我的组件中，它就不会工作。

【问题讨论】：

我在您的代码和教程之间看到的直接区别是您在导入时包含了.js 扩展名。也许您应该尝试省略它，而使用import db from '../main'。当然，我从来没有使用过导入或导出，所以我不能说这是否会解决你的问题。

观察力不错。我从来没有注意到它可以在没有 .js 扩展名的情况下工作。我试了一下，路径仍然有效，但我有同样的错误。

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

【讨论】：

见***.com/questions/35240716/…

【参考方案2】：

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

import Firebase from 'firebase'

或

import * from 'firebase'

【讨论】：

感谢您的帮助，我终于找到了答案。我在单独的答案中发布了解决方案。