Firebase - Vue |基本设置不检索数据答案

【问题标题】：Firebase - Vue | Basic setup doesn't retrieve dataFirebase - Vue |基本设置不检索数据
【发布时间】：2019-04-17 23:56:38
【问题描述】：

我遇到了这个问题，我一直试图让 Vue 至少从 firebase 检索非常基本的设置。它没有。我走了各种路线，但没有任何效果，所以也许我错过了一些东西，也许是显而易见的。

我在控制台中没有任何错误，除了没有检索到任何内容之外，一切似乎都运行良好。网络连接似乎没有检索到任何可能与 db 相关联的响应。这是来自 firebase 的屏幕截图，也许我误解了 firebase 和设置：

https://ibb.co/fPTsQL

// Main.js

/* eslint-disable semi */
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import VueFire from 'vuefire';

Vue.use(VueFire);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//App.vue

<template>
  <div id="app">
    <p>This will render</p>

    <div v-for="message in messages" :key="message.text"> <!-- This will NOT -->
    <h4>{{ message.title }}</h4>
    <p>{{ message.text }}</p>
    <p>{{ message.timestamp }}</p>
</div>
  </div>
</template>

<script>
import firebase from 'firebase';

  var config = {
    apiKey: "IN THE CODE I HAVE A WORKING API KEY",
    authDomain: "vuemymessage.firebaseapp.com",
    databaseURL: "https://vuemymessage.firebaseio.com",
    projectId: "vuemymessage",
    storageBucket: "vuemymessage.appspot.com",
    messagingSenderId: "204332593971",
    timestampsInSnapshots: true
  };
  let app = firebase.initializeApp(config);

  let db = firebase.firestore();

  export default {
    name: "App",
    data(){
      return {
        messages: []
      }
    },
    firestore(){
      return {
        messages: db.collection('messages')
      }
    },
  }
</script>

<style>
#app {
}
</style>

【问题讨论】：

如果您将所有配置和 initializeApp() 放在 main.js 中的“新 Vue”中创建的函数中怎么办？或者你可能需要import * as firebase from 'firebase'

标签： javascript firebase vue.js

【解决方案1】：

您正在尝试在组件上设置 firebase，老实说，我不确定这是否是它失败的原因，但我从未见过这样的情况。

我总是这样

// firebase.js

import * as firebase from 'firebase'
import 'firebase/firestore'

import config from './.firebaseconfig'

firebase.initializeApp(config)

const db = firebase.firestore()
export const rooms = db.collection('rooms')
export const sortedRoomsByCreatedDate = db.collection('rooms').orderBy('createdAt')

请注意，您缺少import 'firebase/firestore' 行，这可能是问题所在。但是，我强烈建议您在自己的文件中初始化 firebase，并将所有参考资料放在一个地方。

当然，我的 main.js 有一个导入到上面的文件 import './firebase'

这就是我在组件上使用引用的方式

<script>
import firebase from 'firebase'
import { sortedRoomsByCreatedDate } from '../firebase'

export default {
  data () {
    return {
      sortedRoomsByCreatedDate: []
    }
  },
  firestore () {
    return {
      sortedRoomsByCreatedDate
    }
  }
}
</script>

让我知道这是否适合你，如果它不让我知道，那么我们可以解决这个问题

【讨论】：