如何使用 Vue.js 从 Firebase 实时数据库中读取数据答案

【问题标题】：How to read data from Firebase Realtime Database with Vue.js如何使用 Vue.js 从 Firebase 实时数据库中读取数据
【发布时间】：2021-02-12 08:58:22
【问题描述】：

我正在尝试 console.log 我的 firebase 实时数据库中的文档，但目前我在尝试时收到此错误：

[Vue 警告]：创建钩子时出错：“TypeError: firebase__WEBPACK_IMPORTED_MODULE_2__.default.database(...).get is not a function”

如何控制台记录我在数据库中的所有文档？

这是我的尝试：

<script>
import firebase from "firebase";
const db = firebase.database();
export default {
  name: "Login",
  data() {
    return {
      user: {
        email: "",
        password: "",
      },
    };
  },
  methods: {
    userLogin() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.user.email, this.user.password)
        .then(() => {
          this.$router.push("/");
        })
        .catch((error) => {
          alert(error.message);
        });
    },
  },
  created() {
    firebase
      .database()
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          console.log(doc.data());
        });
      });
  },
};
</script>

【问题讨论】：

你能分享包含你的 Firebase 配置的文件吗？

标签： javascript firebase vue.js firebase-realtime-database

【解决方案1】：

如果您使用的是模块捆绑器，则应导入 Firebase SDK，如 documentation 中所示。此语法适用于 8.0.0 或更高版本的客户端 SDK：

import firebase from "firebase/app";
import "firebase/database";

对于以前的版本：

import * as firebase from "firebase/app";

【讨论】：