我正在将Fire与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插件的初始化?
谢谢!
答案 0 :(得分: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"
})
}
})
请不要忘记将prop添加到html:
<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的组件重复此操作。