VueJS + VUEX + Firebase：在哪里连接Firebase？ [英] VueJS + VUEX + Firebase: Where To Hook Up Firebase?

问题描述

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

Firebase的引用。

解决方案 c> cd 到你的项目目录下，然后在命令行中运行下面的命令：
$ b $ pre $ n $ c $ npm install - -save firebase

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

$ pre $ v $ from $'$'
从'./App.vue'导入应用程序
导入*从'firebase'作为firebase
从'./store/store'

$ b b 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文件中，如下所示：
  
  $ b $ firebase-config.js
  
  
  $ p $ export const config = {
apiKey：xxxxxxx，
authDomain：xxxxxxx，
databaseURL： xxxxxxx，
storageBucket：xxxxxxxx，
messagingSenderId：xxxxxxx
};


  现在在你的main.js中执行如下操作：
  
  
  从'vue'导入Vue
  从'./App.vue'导入应用程序
  导入*从'firebase'作为firebase
  导入{存储}从'./store/store'
  从'./firebase-config'导入{config}
  
  $ b Vue.prototype。$ firebase = firebase.initializeApp（config ）;
  
  new Vue（{
  el：'#app'，
  store，
  render：h => h（App）
  }）
  

  
  
  

  
  

  • 将firebase添加到 Vue中。原型允许在您的vue组件中使用firebase，使用 this。$ firebase

  如果您不想要这种行为，那么您可以使用 firebase.initializeApp（config）;

  初始化firebase，
  

  •  从'vue'$ b导入Vue 
    现在来到您的vuex商店，您可以导入firebase模块$ b从'vuex'导入Vuex 
    导入*从'firebase'作为firebase 
     
     Vue.use（Vuex）; 
     $ b $ export b 
     
     
     
     
     
     
     
     
     $ myFirebaseAction： {commit}）=> {
     //你可以像这样使用firebase 
     var ref = firebase.database（）.ref（）
    } 
    } 
     }）; 
      

  
  
  
  

  I would like to integrate Firebase in my Vue.JS app.

  I wonder WHERE to put the references to Firebase.

  解决方案

  To install firebase as a dependency in your project cd into your project directory and run the following command in the command line

  npm install --save firebase
  

  Now in your main.js file add this

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

  • you can also add your firebase credentials in an external js file and import it in the main.js file as follows:

  firebase-config.js

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

  Now in your main.js do as follows

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

  • adding firebase to the Vue.prototype allows usage of firebase in your vue components by using this.$firebase

  • if you dont want this behaviour you can just initialize firebase using firebase.initializeApp(config);

  • now coming to your vuex store you can just import the firebase module as below

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

  这篇关于VueJS + VUEX + Firebase：在哪里连接Firebase？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！