VueJS + VUEX + Firebase：在哪裏連接Firebase？

Question

我想整合Firebase在我的Vue.JS應用程序。

我想知道在哪裏可以將參考文獻添加到Firebase。

Answer 1

要在項目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" 
    }; 

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

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

• 您還可以將您的Firebase憑據添加到外部js文件中，並將其導入到main.js文件中，如下所示：

火力-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' 


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

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

• 增加火力點到Vue.prototype允許火力的使用在你的VUE組件通過使用this.$firebase

• ，如果你不希望這種行爲你可以初始化火力使用firebase.initializeApp(config);

• 現在來到你vuex商店，你可以只導入火力模塊如下

  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() 
       } 
      } 
  });