0

目前正在通过 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
}

可以这样设置，而不是将配置设置为固定值。

4

1 回答 1

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>
于 2019-08-25T12:46:04.527 回答