firebase - VueJS+VUEX+फायरबेज: फायरबसे को हुक करने के लिए कहां?



vue.js (1)

मैं अपने Vue.JS एप में फायरबेज को एकीकृत करना चाहूंगा।

मुझे आश्चर्य है कि 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"
  };

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

new Vue({
  el: '#app',
  store,
  render: h => h(App)
}) 
  • आप एक बाहरी जेएस फ़ाइल में अपने फायरबेज क्रेडेंशियल्स को भी जोड़ सकते हैं और इसे 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'


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

new Vue({
  el: '#app',
  store,
  render: h => h(App)
}) 
  • Vue.prototype फायरबेज को जोड़ने से यह आपके Vue.prototype घटकों में Vue.prototype उपयोग की अनुमति देता है this.$firebase

  • यदि आप यह व्यवहार नहीं करना चाहते हैं तो आप केवल firebase.initializeApp(config); का उपयोग कर firebase.initializeApp(config); आरंभ कर सकते हैं 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()
            }
        }
    });  
    




vuex