VueJS + VueX + Firebase：在哪里连接 Firebase？

Question

我想将 Firebase 集成到我的 Vue.JS 应用中。

我想知道在哪里将 references 放到 Firebase。

Answer 1

将firebase作为项目cd中的依赖项安装到项目目录中并在命令行中运行以下命令

npm install --save firebase

现在在你的 main.js 文件中添加这个

import Vue from 'vue'
import App from './App.vue'
import * as firebase from 'firebase'
import { store } from './store/store'


const config = {
    apiKey: "xxxxxxx",
    authDomain: "xxxxxxx",
    databaseURL: "xxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxxx"
  };

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

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

• 您还可以在外部 js 文件中添加您的 firebase 凭据，并将其导入 main.js 文件，如下所示：

firebase-config.js

export const config = {
    apiKey: "xxxxxxx",
    authDomain: "xxxxxxx",
    databaseURL: "xxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxxx"
  }; 

现在在您的 main.js 中执行以下操作

import Vue from 'vue'
import App from './App.vue'
import * as firebase from 'firebase'
import { store } from './store/store'
import { config } from './firebase-config'

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

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

• 将 firebase 添加到 Vue.prototype 允许通过使用 this.$firebase 在您的 vue 组件中使用 firebase

• 如果您不希望这种行为，您可以使用 firebase.initializeApp(config); 初始化 firebase

• 现在来到您的 vuex 商店，您只需导入 firebase 模块，如下所示

  import Vue from 'vue'
  import Vuex from 'vuex'
  import * as firebase from 'firebase'
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
      state:{},
      mutations:{},
      actions:{
          myFirebaseAction: ({commit}) => {
              //you can use firebase like this
              var ref = firebase.database().ref()
          }
      }
  });  
  

感谢 @umang 建议将 firebase 全局命名空间添加到 Vue.prototype 而不是 firebase 应用实例。