Vue.Js - Firebase Funktionen können nicht auf Komponenten verwendet werden

Question

I Vue Ressource wurde mit Daten aus meiner Web-App auf die Feuerbasis zu veröffentlichen. Aber dann habe ich gerade herausgefunden, dass ich die Firebase-Integration verwenden muss, um IMAGES in den Firebase-Speicher zu laden. so integriert ich es in meinem 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' 
 
    }) 
 
    } 
 
})

aber als ich versuchte, es in einem meiner Komponenten Methoden zu verwenden:

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}) 
 
     }); 
 
    } 
 
}

.. heißt es in dem Konsolenprotokoll, dass 'firebase' is not defined

Ich vermutet, dass Feuerbasis Funktionen können nicht einmal in den Komponenten verwendet werden, obwohl es in dem main.js integriert ist

Wie mache ich Gebrauch davon in den Komponenten? Gibt es einen anderen Weg?

Answer 1

Sie erscheinen nicht VueFire verwenden zu werden, was ich glaube, wie $ durch eine Feuerbasis Feuerbasis Vue Eigenschaft prototype aussetzt. Sie können dies jedoch manuell tun.

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 

Danach wird in Feuerbasis als this.$firebase jeder Vue oder Komponente zur Verfügung.

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