Question

我有一个小页面的VueJS应用程序，它使用Firebase。我目前面临的问题是当我尝试从组件中的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 Antonov的帮助下，我设法以这种方式解决了我的问题：

我改变了我的组件：

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引用。

Answer 3

只需：

var parsedObj = JSON.parse(JSON.stringify(this.$root.members))
console.log(parsedObj)

它将 [ ob ：观察者] 转换为其值

VueJS：observer对象而不是Array

3 个答案: