（Webpack無法構建？）不同級別的Vue組件中的Firebase DB

Question

我試圖使用單個文件Vue組件設置vue-fire應用程序。
我正在使用官方網站上提供的標準（完整）Vue-cli Webpack模板。

我有火力裝在App.vue這樣的：

let config = { 
    ... 
}; 
let app = Firebase.initializeApp(config); 
let db = app.database(); 
let usersRef = db.ref('users'); 

...

export default { 
    name: 'app', 
    data() { 
     return { 
      login: { 
       email: '', 
       password: '' 
      }, 
      newUser: { 
       email: '', 
       password: '' 
      }, 
      showRegister: false 
     } 
    }, 
    firebase: { 
       users: usersRef, 
    }, 
    ... 
} 

我使用Vue的路由器和我的路由設置是這樣的：

import Vue from 'vue' 
import Router from 'vue-router' 
import Home from '@/components/Home' 
import News from '@/components/News' 

Vue.use(Router) 

export default new Router({ 
    routes: [ 
     { 
      path: '/', 
      name: 'Home', 
      component: Home 
     }, 
     { 
      path: '/news', 
      name: 'News', 
      component: News 

     } 
    ] 
}) 

我希望能夠訪問我在'新聞'組件中的Firebase應用。問題是，如果我包括在News.vue文件的完整Firbase設置，我得到的錯誤：

[DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). 

的recommended solution是初始化應用程序的數據庫中導出在App.vue和子組件導入。所以，我要對我App.vue腳本的底部添加：

module.exports.FBApp = app.database(); 

而且這News.vue：

import FBApp from '../App.vue' 
let usersRef = FBApp.ref('users') 

但現在我收到以下錯誤：

TypeError: __WEBPACK_IMPORTED_MODULE_0__App_vue___default.a.ref is not a function 

有誰知道這個怎麼做？當然它不會太難。

Answer 1

創建一個像app.vue一樣的db.js文件。

import firebase from 'firebase' 

var config = { 
    apiKey: 'xxxxx' 
    authDomain: 'xxxxx' 
    databaseURL: 'xxxxx' 
    projectId: 'xxxxx' 
    storageBucket: 'xxxxx' 
    messagingSenderId: 'xxxxx' 
} 
const firebaseApp = firebase.initializeApp(config) 

const db = firebaseApp.database() 

export default db 

在你main.js：

import Vue from 'vue' 
import App from './App' 
import router from './router' 
import VueFire from 'vuefire' 

// explicit installation required in module environments 
Vue.use(VueFire) 

Vue.config.productionTip = false 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
}) 

任何組件

而現在，如：

<template> 
    <span> 
    {{ news }} 
    </span> 
</template> 
<script> 
import db from '../db' 
export default { 
    data: function() { 
    return { 
     users: [], 
     sample: [] 
    } 
    }, 
    firebase: function() { 
    return { 
     news: db.ref('news') 
    } 
    } 
} 
</script>