firebase - 检索数据时出现 Vue/Firestore/Firebase 错误
问题描述
我正在使用 Firestore 数据库创建一个 Vue JS 应用程序,但在 Firestore 导入中的某个地方(可能)存在问题。它是一个简单的应用程序,只是存储了一些想要显示(最初)以测试其工作的员工详细信息。(它没有!)它只是使用“firebase”:“^5.0.4”,而不是 vue-firebase 或其他插件。
它的 Firestore 不是 Firebase 实时数据库。
所以在 firebaseInit.js 配置文件中是所有基本配置选项,如下所示
import * as firebase from 'firebase'
// Initialize Firebase
var config = {
apiKey: "AIzaSyCyKS3QxqtR9HvetpT2vWKFNxa_yeRKdhA",
authDomain: "vuefsprod-fc778.firebaseapp.com",
databaseURL: "https://vuefsprod-fc778.firebaseio.com",
projectId: "vuefsprod-fc778",
storageBucket: "vuefsprod-fc778.appspot.com",
messagingSenderId: "1048509841840"
}
firebase.initializeApp(config)
var auth = firebase.auth()
var db = firebase.database()
export function signOut (callback) {
auth.signOut().then(value => {
callback()
}, err => { callback(err) })
}
export default 'firebase/firestore'
然后测试它的脚本片段如下(在 Helloworld.vue 中)
import db from '../firebaseInit'
export default {
name: 'home',
data () {
return {
employees: [],
loading: true
}
},
created() {
db.collections('employees').get().then(querySnapshot => {
querySnapshot.forEach(doc => {
console.log(doc)
const data = {
}
})
})
}
}
Yarn 编译显示的应用程序,但控制台中出现警告错误,如下所示
[Vue warn]: Error in created hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0__firebaseInit__.a.collections is not a function"
found in
---> <Home> at src/components/HelloWorld.vue
并且没有数据显示到控制台,员工集合中有 6 项。
我也想知道 a.collections 中的“a”来自哪里。
任何关于此的提示或更好的方法,例如使用 vue-firebase 或其他方法,都非常受欢迎。截图如下。
非常感谢
解决方案
您正在使用实时数据库 (RTDB) 服务而不是 Firestore 服务声明数据库:
var db = firebase.database() // <- RTDB
您应该改为执行以下操作:
var db = firebase.firestore()
由于 RTDB 没有集合,您会收到错误“集合不是函数”
仅供参考,此处记录了不同的可用服务:https ://firebase.google.com/docs/web/setup#use_firebase_services ,以及如何访问/声明它们。
推荐阅读
- google-analytics - 如何跟踪用户从网站的哪个区域进入特定页面?
- python - 错误:“GRIB_API 错误:未知 stepType=[7] timeRangeIndicator=[7]”使用 eccodes
- android - 如何在 Android Volley 中使用 getParams 返回 JsonObject?
- php - Laravel - 按 ASC / DESC 按钮或 href 排序
- asp.net - Asp.net Core中多个模型与评论模型的关系
- javascript - 如何更快地在 html/css/javascript 中编写多个文本框?
- xamarin.forms - 如何在 CollectionView 中搜索项目
- vue.js - 如何在 vue bootstrap 中自定义卡片的图像大小
- c++ - 如何在类中使用和访问静态成员指针值 s_ptm?
- c# - 为什么 C# linq Distinct 方法更快