动态设置vuejs2 firebase配置

Question

当前我正在通过以下方式在vuejs2中设置firebase凭据

import Vue from 'vue';
import * as firebase from "firebase";
import VueFire from 'vuefire';

var config = {
   apiKey: "",
   authDomain: "",
   databaseURL: "",
   projectId: "",
   storageBucket: "",
    messagingSenderId: ""
};

Vue.use(VueFire);
firebase.initializeApp(config);

const firebasestore = firebase;
Vue.prototype.$firebase = firebasestore;

export { firebasestore }

我想要的是在创建的组件上动态设置凭据示例，而不是apkey，authdomain，databaseUrl，projectid存储区的固定值

所以就像这样。在我的组件中，我希望将凭据设置为

created(){
 this.$firebase.set ...// here set the config details
}

是否可以这样设置而不是在固定值上设置配置。

Answer 1

你可以使用Vuex商店，在那里你有一个初始化Firebase的突变。

然后，您可以调用一个操作来获取Firestore。

下面是一个例子(非常粗糙的POC...)：

商店

import Vue from 'vue';
import Vuex from 'vuex';
import firebase from 'firebase/app';
import 'firebase/firestore';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {},
    actions: {
        fetchFirebase({ commit, state }) {

            firebase.firestore().collection("myCollection")
                .doc("myDocument")
                .get()
                .then(doc => {
                    console.log(doc.data());
                })
                .catch(err => {
                    console.log(err);
                });

        },
    },
    mutations: {
        initialiseFirebase(state, val) {
            firebase.initializeApp(val);
        },
    }
});

组件

<template>
  <div>
    <button @click="initFirebase" class="button">Init Firebase</button>
    <button @click="fetchFirestore" class="button">Fetch Firestore</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    initFirebase() {
      const config = {
        apiKey: ".....",
        authDomain: ".....",
        databaseURL: ".....",
        projectId: "....."
      };
      this.$store.commit("initialiseFirebase", config);
    },
    fetchFirestore() {
      this.$store.dispatch("fetchFirebase");
    }
  }
};
</script>