Created
January 24, 2019 20:02
-
-
Save rascoop/74f171180e49a34f2562bda3800c34e1 to your computer and use it in GitHub Desktop.
Firebase & Vuex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' | |
firebase.initializeApp(config); | |
Vue.prototype.$firebase = firebase; | |
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 don't want this behavior 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() | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment