Vue.Js -无法在组件上使用Firebase函数

Question

我正在使用Vue资源将我的web应用程序中的数据发布到防火墙。但是，我刚刚发现，我需要使用firebase集成来上传图像到防火墙存储中。因此，我将其集成到src/main.js中。

​

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import * as firebase from 'firebase'
import App from './App.vue'
import Routes from './routes'

Vue.use(VueResource);
Vue.use(VueRouter);

const router = new VueRouter({
  routes: Routes,
  mode: 'history'
});

new Vue({
  el: '#app',
  render: h => h(App),
  router: router,
  created () {
    firebase.initializeApp({
      apiKey: 'AIzaSyDhdEhcLPfGqo5_msnhVKWH9BkZNOc6RYw',
      authDomain: 'nots-76611.firebaseapp.com',
      databaseURL: 'https://nots-76611.firebaseio.com',
      projectId: 'nots-76611',
      storageBucket: 'gs://nots-76611.appspot.com'
    })
  }
})

​

但是当我试图在组件的方法中使用它时：

​

methods: {
    post: function(){
      //for(var i = 0; i < this.tailors.length; i++){
      //  if(this.$route.params.id == this.tailors[i].id)
      //    this.ready_to_wear.tailor_name = this.tailors[i].tName;
      //}
      //this.$http.post('https://nots-76611.firebaseio.com/ready_to_wear.json', this.ready_to_wear);
      let key
      firebase.database().ref('ready_to_wears').push(this.ready_to_wear)
        .then((data) => {
          key = data.key
          return key
        })
        .then(key => {
          const filename = this.image.name
          const ext = filename.slice(filename.lastIndexOf('.'))
          return firebase.storage().ref('rtws/' + key + '.' + ext).put(this.image)
        })
        .then(fileData => {
          imageUrl = fileData.metadata.downloadURLs[0]
          return firebase.database().ref('ready_to_wears').child(key).update({rtwImg: imageUrl})
        });
    }
}

​

。。它在控制台日志中说，'firebase' is not defined

我猜想即使在main.js中集成了firebase函数，也不能在组件中使用它

如何在组件中使用它？还有别的办法吗？

Answer 1

您似乎没有使用VueFire，我认为它通过Vue prototype属性将firebase公开为$firebase。但是，您可以自己手动完成。

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import * as firebase from 'firebase'
import App from './App.vue'
import Routes from './routes'

Vue.prototype.$firebase = firebase

在此之后，每个Vue或组件都将以this.$firebase的形式提供firebase。

methods: {
    post: function(){
        this.$firebase.database().ref() ... etc ...
    }
}