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

Question

I am trying to import data from a Firestore Database into a Vue CLI project but can not get it to work. I have followed several tutorials and my version never works. It seems I have a problem retrieving the data each time I try, as my console.log shows nothing.

I have the following in a JS file (index.js which lives in a folder called db - Plus for security, I have removed the content in quotations for here on 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 });

Then in my component I have the below;

import db from '@/db'

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

I have read that I nolonger need the db.settings({ timestampsInSnapshotps: true }); However, when I remove this it errors in the terminal and browser.

Template as below;

<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>

Any help welcome as I have been trying for days.

Answer 1

Do as follows:

Adapt your Firebase db/index.js as follows:

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
}

---

Adapt your Component as follows:

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);
      })
  }
}