动态设置 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 storage bucked 的固定值

类似的东西。在我的组件中，我想设置

之类的凭据

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>

动态设置 vuejs2 firebase 配置

Set vuejs2 firebase config dynamically

javascript

firebase

vuejs2

vuefire

google-cloud-firestore

商店

组件