通过vue-cli(webpack)在vuejs2 app中使用firebase

Question

我是新手使用vue-cli webpack模板 我想使用firebase作为vueapp的数据库我已经这样做将Firebase导入我的应用程序

main.js

//imported rest all required packages just dint mention here
import * as firebase from 'firebase'

let config = {
apiKey: " - XXXXXXXXCXCC",
authDomain: "XXXXXXXXX",
databaseURL: "XXXXXCCCX",
storageBucket: "XXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXX"
};

firebase.initializeApp(config);

new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

现在在我的signup.vue文件中,我必须再次导入以下内容

import * as firebase from 'firebase'

为了在我的方法中使用以下内容

firebase.auth().createUserWithEmailAndPassword(uEmail, uPassword).catch(function(error) {
                // Handle Errors here.
                var errorCode = error.code;
                var errorMessage = error.message;
                // ...
            });

我的问题是我必须导入

import * as firebase from 'firebase'

无处不在(即在alll vue组件脚本标签中使用与firebase相关的方法,如

firebase.auth()
firebase.database()
firebase.storage()

或者我可以将它导入一个中心位置并使用 firebase.method() in any vue component file when needed

Answer 1

你可以附加firebase到Vue.prototype:

import * as firebase from 'firebase'

let config = {
  //
}

Vue.prototype.$firebase = firebase.initializeApp(config)

new Vue({
  //
})

然后,将它用于这样的组件:

this.$firebase.database()