複数のコンポーネントを持つVuejs共有ライブラリ

Question

私はVueをFirebaseとともに使用しています。私は、次のコード

Index.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に保存するときに、ライブラリを初期化するためにほぼ同じコードを実行します。

Create.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のインスタンスでそれをinicializeや小道具などのコンポーネントにそれを渡すことはありません。それともヴェクスでそれを保持する。

<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/>' 
}) 

をこれに：

<my-component :fb="instance"> 

：

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

HTMLだけに小道具を追加することを忘れないでくださいコンポーネント定義の場合：

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を使用するすべてのすべてのコンポーネント、でこれを繰り返します。