VueJS：观察者对象而不是阵列

Question

我有一个使用Firebase的小页面VueJS应用程序。我目前面临的问题是当我尝试从组件中的Firebase中检索集合时。 vue实例不是返回一个数组，而是返回一个观察者对象，更准确地说是[__ob__: Observer]。我明白，Vue JS使用这个对象来实现它的魔力，我不明白的是我该怎么做才能得到真正的数组。我无法对该对象做任何事情，无法迭代它。我尝试过任何生命周期方法来尝试做，但没有运气。更令人沮丧的是，当我关闭并再次打开Chrome控制台（F12）时，方法再次被调用，对象实际上被解析到数组中。我最初认为数据可能还没有被检索，但数据存在于对象本身中，我无法访问它。

这里是我的代码：

Vue的实例：

new Vue({ 
    el: '#app', 
    firebase: { 
    orders: firebase.database.ref('orders').orderByChild('created_at'), 
    members: firebase.database.ref('members').orderByChild('created_at') 
    }, 
    router, 
    template: '<App/>', 
    components: { App } 
}) 

组件代码：

export default { 
    data() { 
    return { 
     'member': null 
    } 
    }, 
    computed: { 
    isMemberLoaded: function() { 
     this.member !== null 
    } 
    }, 
    mounted: function() { 
    console.log('mounted') 
    this.init() 
    console.log(this.$root.members) // [__ob__: Observer] 
    }, 
    created: function() { 
    console.log('created') 
    console.log(this.$root.members) // [__ob__: Observer] 
    }, 
    updated: function() { 
    console.log('updated') 
    console.log(this.$root.members) // [__ob__: Observer] 
    }, 
    methods: { 
    init: function() { 
     console.log('init') 
     console.log(this.$root.members) // [__ob__: Observer] 
    } 
    } 
} 

观察员物体看起来是这样的：

[__ob__: Observer] 
    0: 
     .key:(...) 
     code:(...) 
     created_at:(...) 
     email:(...) 
     name:(...) 
     __ob__:Observer {value: {…}, dep: Dep, vmCount: 0} 
     get .key: ƒ reactiveGetter() 
     set .key: ƒ reactiveSetter(newVal) 
     get code: ƒ reactiveGetter() 
     set code: ƒ reactiveSetter(newVal) 
     get created_at: ƒ reactiveGetter() 
     set created_at: ƒ reactiveSetter(newVal) 
     get email: ƒ reactiveGetter() 
     set email: ƒ reactiveSetter(newVal) 
     get name: ƒ reactiveGetter() 
     set name: ƒ reactiveSetter(newVal) 
     __proto__: Object 
     length: 1 
    __ob__: Observer {value: Array(1), dep: Dep, vmCount: 0} 
    __proto__: Array 

我在想什么这里？

Answer 1

我不知道这个firebase的工作原理。但是我确定你可以在每个组件中使用this来访问$ firebase对象，因为它显然是全局的并在那里找到你的数据。

export default { 
     data() { 
     return { 
      'member': null 
     } 
     }, 
     firebase: { 
     members: db.ref('members') 
     }, 
     computed: { 
     isMemberLoaded: function() { 
      this.member !== null 
     } 
     }, 
     mounted: function() { 
     console.log('mounted') 
     this.init() 
     console.log(this.$root.members) // [__ob__: Observer] 
     }, 
     created: function() { 
     console.log('created') 
     console.log(this.$root.members) // [__ob__: Observer] 
     }, 
     updated: function() { 
     console.log('updated') 
     console.log(this.$root.members) // [__ob__: Observer] 
     }, 
     methods: { 
     init: function() { 
      console.log('init') 
      console.log(this.$root.members) // [__ob__: Observer] 
     } 
     } 
    } 

Answer 2

因此，随着@Georgi安东诺夫的帮助下，我成功地解决我的问题是这样的：

我改变了我的部分是这样的：

methods: { 
    init: function() { 
     let _vm = this 
     let _id = _vm.$route.params.id 
     _vm.$root.$firebaseRefs.members.child(_id).on('value', function (d) { 
     console.log(d.val()) 
     }) 
    } 
    } 

主要部分是_vm.$root.$firebaseRefs.members。这实际上在一个firebase对象（集合？）中解决，并从那里你可以访问数据。 child函数只是通过传入的id检索元素。这不是一个数组，但我不需要一个，因为我不需要搜索。为了得到整个列表，只需更改为_vm.$root.$firebaseRefs.members.on('value', function() {}。

虽然Georgi Antonov提供了answer above，但这并不完全正确。 Firebase引用在Vue实例中定义，并且不需要在组件中再次声明它们。因此，this将不会在范围内拥有Firebase参考。