javascript - Vuejs 全局注册 vuefire

Question

所以我已经安装了 vuefire，我有

在main.js

var Vue = require('vue')
var VueFire = require('vuefire')
var firebase = require('firebase')

Vue.use(VueFire)
var firebaseApp = firebase.initializeApp({ ... })
var db = firebaseApp.database()

现在我被困在如何全局注册firebase，以便在组件内部我可以简单地做

export default{
 mounted(){
   this.$firebase....
   }
 }

如何在 main.js 文件中全局注册 firebase，以便在其他组件中我不需要始终初始化 firebase 配置和数据库

Answer 1

我们还需要启动 firebase 连接。创建一个名为firebase.js.

import Firebase from 'firebase'

const firebaseApp = Firebase.initializeApp({
  // Populate your firebase configuration data here.
  ...
});

// Export the database for components to use.
// If you want to get fancy, use mixins or provide / inject to avoid redundant imports.
export const db = firebaseApp.database();

然后在另一个组件用户中使用

<template>
  <p v-for="user of users">
    {{user.name}}
  </p>
</template>
<script>
import {db} from './firebase';

export default {
  data() {
    return {
      users: {}
    }
  },

  firebase: {
    users: {
      source: db.ref('users'),
      // Optional, allows you to handle any errors.
      cancelCallback(err) {
        console.error(err);
      }
    }
  }
}
</script>

Answer 2

我所做的就像以下。1. 在 src/plugins/firebaseApp.js 中制作一个插件

import * as firebase from "firebase/app"
const config = {
  apiKey: "<your key>",
  authDomain: "<your domain>",
  databaseURL: "https://<your URL>.firebaseio.com",
  projectId: "<your projectId>",
}
export default firebase.initializeApp(config)

2. 在 main.js

...
import firebaseApp from './plugins/firebaseApp'
...

new Vue({
  ...
  firebaseApp,
  ...
  render: h => h(App)
}).$mount('#app')