我的 Vue.js 应用程序中的 Firebase 集成问题

Posted 2023-02-22

【中文标题】我的 Vue.js 应用程序中的 Firebase 集成问题

【英文标题】：Troubles with my Firebase-integration inside my Vue.js App

【发布时间】：2019-12-13 01:37:25

【问题描述】：

目前我正在尝试在我的 Vue.js 应用程序中实现 firebase。我使用 Vue CLI 设置了 Vue.js，安装了 firebase 以及 vuefire 和 bootstrap-vue，现在我尝试手动获取一些我插入到我的数据库中的数据，但不知何故我没有从 firebase 获取任何数据。我对 Vue.js 很陌生，所以这可能是初学者的错误，但我现在真的不知道该怎么做。

我不知道这是否重要，但我计划稍后使用 vuex，所以我也安装了它，我关注了 tutorial 关于如何设置 Vue.js，在那里她使用的是本地 js 文件作为数据库，我已经设置好了，但现在我想使用 Firebase 作为我的数据库。

我认为如果我在这里发布与此相关的每个文件会有点过分，所以我创建了一个包含所有文件的GitHub Repository，但这是我认为问题可能出在的部分：

<b-table striped hover :items="clients"></b-table>
 clients 

import  db  from '@/environment/firebase'

export default 
  data () 
    return 
      clients: [],
      systems: []
    
  ,
  firestore: 
    clients: db.collection('clients'),
    systems: db.collection('systems')
  

不知何故 Vue.js 无法正确提取数据。我认为这可能与来自 firebase 的身份验证错误有关，但我的控制台没有显示任何错误，我运行 npm run serve 的控制台也没有显示任何错误，此时我真的不知道该怎么做.

也可能是我的错误出现在我的 firebase 集成文件中，因为我刚刚从 Get started page from vuefire 复制了一个：

import firebase from 'firebase'
import firebaseConfig from './firebaseConfig'

// Get a Firestore instance
export const db = firebase.initializeApp(firebaseConfig).firestore()

// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const  TimeStamp, GeoPoint  = firebase.firestore
export  TimeStamp, GeoPoint 

但是，正如我所说，我真的不知道我的错误是什么，因为根据我的理解，到目前为止一切都应该正常..

【参考方案1】：

在您的main.js 中，您包含了两次：

import './plugins/bootstrap-vue'

不包括vuefire.js 插件文件。