如何将数据从 Firestore 导入 Vue CLI 项目？

Question

我正在尝试将 Firestore 数据库中的数据导入 Vue CLI 项目，但无法使其正常工作。 我遵循了几个教程，但我的版本从来没有用过。每次我尝试检索数据时似乎都有问题，因为我的 console.log 没有显示任何内容。

我在一个 JS 文件中有以下内容（index.js 位于一个名为 db 的文件夹中——另外，为了安全起见，我已在 Stackoverflow 上删除了引用中的内容）；

import firebase from "firebase";
import "firebase/firestore";

var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({ timestampsInSnapshotps: true });

然后在我的组件中，我有以下内容；

import db from '@/db'

export default {
  name: 'HelloWorld',
  data () {
    return {
        cafes: []
    }
  },
  created () {
      db.collection('cafes').get().then((snapshot) => {
        console.log(snapshot.docs);
      });
  }
}

我已经读到我不再需要db.settings({ timestampsInSnapshotps: true }); 但是，当我删除它时，它会在终端和浏览器中出错。

模板如下；

<template>
  <div class="cafes">

    <h1>Here are some cafés</h1>

    <div for="cafe in cafes" v-bind:key="cafe.name">
        <div>
            {{cafe.name}}
        </div>
    </div>

  </div>
</template>

欢迎任何帮助，因为我已经尝试了几天。

Answer 1

如下操作：

如下调整您的 Firebase db/index.js：

import firebase from 'firebase'
import 'firebase/firestore'

// firebase init goes here
const config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
}
firebase.initializeApp(config)

const db = firebase.firestore()

// firebase collections
const cafesCollection = db.collection('cafes')

export {
    db,
    cafesCollection
}

---

如下调整你的组件：

const firebase = require("../db/index.js");  // Adapt the path as desired

export default {
  name: 'HelloWorld',
  data () {
    return {
        cafes: []
    }
  },
  created () {
      firebase.cafesCollection.get().then((snapshot) => {
        console.log(snapshot.docs);
        let cafesArray = [];
        snapshot.forEach(doc => {
          cafesArray.push({id: doc.id, ...doc.data()});
        });
        this.cafes = cafesArray;
      })
      .catch(error => {
         console.log(error);
      })
  }
}