Question

我想在 Vue.JS 应用中集成 Firebase 。

我想知道将引用放到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文件中，如下所示：

<强>火力-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
如果您不想要此行为，则可以使用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应用实例。

VueJS + VUEX + Firebase：在哪里连接Firebase？

1 个答案: