如何在 VueJS 中读取 Firebase 数据？

Question

我遵循了 Firebase、Vue.js 和 VueFire 的教程，但我遇到了很多麻烦。数据库是实时数据库，而不是 Firestore，当我尝试查看数据集合时，我得到的返回结果要么是 "undefined"，要么是一个包含一堆我无法理解的垃圾的对象（当我期望json)。数据库规则配置为读取。我做错了什么？

import Firebase from "firebase";

// firebase init goes here
let config = {
  apiKey: "removed",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
};

let app = Firebase.initializeApp(config);
let db = app.database();
let postsRef = db.ref("posts");

//postsRef returns undefined. Why?!?!?

或者有这个……我该怎么办：

Reference {repo: Repo, path: Path, queryParams_: QueryParams, orderByCalled_: false}
database: Database
key: "posts"
orderByCalled_: false
parent: Reference
path: Path {pieces_: Array(1), pieceNum_: 0}
queryParams_: QueryParams {limitSet_: false, startSet_: false, startNameSet_: false, endSet_: false, endNameSet_: false, …}
ref: Reference
repo: Repo {repoInfo_: RepoInfo, app: FirebaseAppImpl, dataUpdateCount: 0, statsListener_: null, eventQueue_: EventQueue, …}
root: Reference
__proto__: Query

Answer 1

那 postsRef returns 对查询位置的引用。您在该 ref 上有方法来提取正确的数据。

检查 firebase api，那里有几个例子：https://firebase.google.com/docs/reference/js/firebase.database.Reference#key

您可能想尝试 postsRef.toJSON() 来获取您需要的 JSON 对象。

如何在 VueJS 中读取 Firebase 数据？

How can you read a Firebase Data in VueJS?

javascript

firebase

vue.js

vuefire