使用vuefire的Firebase绑定源无效

Question

我从vue和firebase开始，但是现在我在显示数据库中已有的内容时出现此错误。

main.js

import vueFire from 'vuefire';
import firebase from 'firebase';

Vue.use(vueFire);

let config = {


apiKey: "mykey",
  authDomain: "mydomain",
  databaseURL: "myurl",
  projectId: "my",
  storageBucket: "bucket",
  messagingSenderId: "number"
};

let application = firebase.initializeApp(config)
let db = application.database()
let notificationsdb = db.ref('notifications')

export { notificationsdb };

component.vue

import { notificationsdb } from '../main';
export default {

    name: 'Notifications',

    firebase: {
      notifi: notificationsdb
    },

    data() {
      return{
        newNoti: {
          name: '',
          text: ''
        },

      }
    },

    methods: {
      addNoti: function(){
        notificationsdb.push(this.newNoti);
        this.newNoti.name = '',
        this.newNoti.text = ''
        toastr.success('Notificación creada');
      },
      deleteNoti: function(noti){
        notificationsdb.child(noti['.key']).remove();
        toastr.success('Notificación eliminada');
      }
    }
  }

如果我删除这行代码然后将其保存然后再放回去，我会保留更改，这样可行。但如果按F5则停止工作

firebase: {
      notifi: notificationsdb
    },

他给我发了以下错误

[Vue警告]：创建的挂钩出错：＆＃34;错误：VueFire：Firebase绑定源无效。＆＃34;

Answer 1

所以，我假设你用以下的东西开始你的项目：

vue init webpack myProject

基本上发生的事情是您的组件在第一次加载时无法访问firebase中的数据。您需要一些时间进行编辑（服务器请求完成的时间）。然后，当您按保存时，它会触发HMR，并且您的网站会重新加载其预期的数据。

尝试进行这些更改（尽管您应该将此配置文件移动到单独的文件中（例如firebaseDB.js））：

// let db = application.database()
// let notificationsdb = db.ref('notifications')
// export { notificationsdb }
export default application.database()

然后在component.vue：

[...]
import db from '../firebaseDB'
[...]
firebase: {
  notifi: db.ref('notifications')    
},
[...]

您可能希望向此组件添加loading状态变量，依此类推。祝你好运！