Vuejs 与多个组件共享库

Question

我将 Vue 与 Firebase 一起使用。我正在使用以下代码进行初始化

索引.vue

import Firebase from 'firebase';
import User from './User';


export default {
    components: {
        User
    },
    data() {
        return {
            users: []
        }
    },
    mounted() {
        let firebase = Firebase.initializeApp({
            apiKey: "blablabla",
        });

        firebase.database().ref('users').on('child_added', (snapshot) => {
            this.users.unshift(user);
        });
    }
}

这一切都很好。现在在另一个组件中，当我想将新实体保存到 Firebase 时，我运行几乎相同的代码来初始化库。

创建.vue

import Firebase from 'firebase';

export default {
    data() {
        return {
            name: '',
            tagid: ''
        }
    },
    methods: {
        createUser() {

            let firebase = Firebase.initializeApp({
                apiKey: "blablabla",
            });

            firebase.database().child('users').push({
                name: this.name,
                tagid: this.tagid
            });
        }
    }
}

现在显然我遇到了一个错误，这也是重复的工作。但我想知道。

如何与所有需要它的组件共享 Firebase 插件的初始化？

谢谢！

Answer 1

只是不要在组件中初始化它，而是在 Vue 实例中并将其作为 prop 传递给组件。或者把它放在 Vuex 中。

<div id="app">
  <component :fb="instance"></component>
</div>

<template id="component">
  ...
</component>

<script>
  Vue.component('comp-one', {
    template: '#comp-one',
    props: ['fb'],
    methods: {
      createUser () {
        this.fb.database().child('users').push({
          name: this.name,
          tagid: this.tagid
        })
      }
    }
  })

  new Vue({
    el: '#app',
    data: {
      instance: null
    },
    created () {
      this.instance = Firebase.initializeApp({
        apiKey: "blablabla"
      })
    }
  })
</script>

所以，在 main.js 中编辑这个：

new Vue({
  template: '<App/>'
})

到这里：

new Vue({
  template: '<App/>',
  data: {
    instance: null
  },
  created () {
    this.instance = Firebase.initializeApp({
      apiKey: "blablabla"
    })
  }
})

别忘了给html添加prop：

<my-component :fb="instance">

在组件定义中：

import Firebase from 'firebase';

export default {
  props: ['fb'],
  data () {
    return {
      name: '',
      tagid: ''
    }
  },
  methods: {
    createUser() {
      this.fb.database().child('users').push({
        name: this.name,
        tagid: this.tagid
      })
    }
  }
}

然后对所有使用 firebase 的组件重复此操作。