（Webpackのビルドに失敗しましたか？）さまざまなレベルのVueコンポーネントのFirebase DB

Question

1つのファイルのVueコンポーネントを使用してvue-fireアプリケーションを設定しようとしています。
公式サイトで入手可能な標準（完全）Vue-cli Webpackテンプレートを使用しています。

私はこのようなApp.vueにfirebaseロードされている：

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で初期化されたアプリのデータベースをエクスポートして、子コンポーネントでそれをインポートすることです。 News.vueへ

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

そして、この：だから、私はApp.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ファイルを作成します。あなたのmain.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 

：いずれかのコンポーネントで

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>