Question

我正在尝试使用单个文件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-router，我的路由设置如下：

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>

（Webpack无法构建？）不同级别的Vue组件中的Firebase DB

1 个答案: