Vue.Js-Firebase函数不能在组件上使用 [英] Vue.Js - Firebase functions cannot be used on components

问题描述

我使用Vue Resource从我的Web应用程序向Firebase发布数据.但是后来，我发现我需要使用Firebase集成将图像上传到Firebase存储中.所以我将其集成到了src/main.js

I was using Vue Resource in posting data from my web app to the firebase. but then, I just found out that I need to use firebase integration to upload IMAGES in the firebase storage. so I integrated it in my 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'
    })
  }
})

但是当我尝试在组件的一种方法中使用它时:

but when I tried to use it in one of my components' methods:

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

.. it says in the console log that 'firebase' is not defined

我猜测Firebase函数即使集成在main.js中也无法在组件中使用

I'm guessing that firebase functions can't be used in the components even though it is integrated in the main.js

如何在组件中使用它?还有其他解决方法吗?

How do I make use of it in the components? is there any other way around it?

推荐答案

您似乎没有使用VueFire，我相信它通过Vue原型属性将Firebase公开为$ firebase.但是，您可以自己手动执行.

You don't appear to be using VueFire, which I believe exposes firebase through a Vue prototype property as $firebase. However, you can do it yourself manually.

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

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

After that, firebase will be available in every Vue or component as this.$firebase.

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

这篇关于Vue.Js-Firebase函数不能在组件上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！