Vuexfire {serialize}选项无法正确格式化数组

问题描述

查询集合时，我尝试添加所有Firestore文档ID。我可以查询实例中的所有集合，但不能将其文档ID绑定到集合数组。

这是我用来查询名为product.js的vuex文件中所有用户产品的代码

import { firestoreAction } from 'vuexfire'
import { db } from '@/firebase/init'

const state = {
  products: []
}

const getters = {}

const actions = {
  init: firestoreAction( context  => {
    const allProducts = db.collection(`users/${context.rootState.authentication.user.uid}/products`)
    context.bindFirestoreRef(
      'products',allProducts,{ 
        wait: true,serialize: doc => {
          // console.log(doc.id) -returns the IDS I am looking for
          return Object.defineProperty(doc.data(),'id',{
            value: doc.id
          })
        }
      }
    )
  })
}

然后我得到这些数据

[
   {
      "name":"product1"
   },{
      "name":"product2"
   }
]

我希望像这样将数据传递给vuex：

[
   {
      "id":"kmp1Ue8g0I130XZ3Ttqd","name":"ll"
   },{
      "id":"qswtcdmnxNxbwmPNR1S3","name":"fdsfs"
   }
]

当我使用console.log(doc.id)时会显示上述ID，但是我没有得到带有 id 值的预期数组，仅是产品 名称

解决方法

这是因为您无法修改doc.data()返回的对象。

以下，使用对象传播运算符创建一个新的普通对象，应该可以解决问题：

return {
   id: doc.id,...doc.data()
 }