vuejs vuex firebase:在哪里连接firebase

Question

我想在我的 vue.js app。

我想知道将参考放到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 App实例。