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