web-dev-qa-db-ja.com

VueJS + VUEX + Firebase：Firebaseをどこに接続するか？

FirebaseをVue.JSアプリに統合したいと思います。

referencesをFirebaseのどこに配置するのでしょうか。

firebasevue.jsvuex
14
timomue

プロジェクトの依存関係として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)
}) 
_
  • 次のように、Firebase認証情報を外部のjsファイルに追加し、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)
}) 
_

  • _Vue.prototype_にFirebaseを追加すると、_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()
        }
    }
});  
_

Firebaseアプリインスタンスではなく_Vue.prototype_にfirebaseグローバルネームスペースを追加することを提案した @ umang へのクレジット.

42
Vamsi Krishna