javascript - 如何将数据从 Firestore 导入 Vue CLI 项目?
问题描述
我正在尝试将 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>
欢迎任何帮助,因为我已经尝试了几天。
解决方案
执行以下操作:
db/index.js
按如下方式调整您的 Firebase :
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);
})
}
}
推荐阅读
- kubernetes-helm - 我可以在脚本中使用 helm 图表中的变量吗?
- c# - HtmlAgilityPack - 如何在函数中获取 Innerhtml 值{}
- sql - 雪花案例语句 - 如果列中存在值,则返回 1,否则返回 0
- css - KendoWindow 不在移动/平板电脑上垂直居中
- flutter - 如何解决错误(查找已停用小部件的祖先是不安全的。)
- python - 如何在 mongodb 更改流中监听嵌套数组的特定字段的更改?
- python - python concurrent.futures.process.BrokenProcessPool
- c++ - 无法在 Visual Studio Code 中编译或运行 C++ 项目
- flutter - Flutter 错误 - 在构建期间调用了 setState() 或 markNeedsBuild()
- javascript - CSS 背景图像未完全填充 + JavaScript 错误处理程序