Vuexfire {serialize} 选项没有正确格式化数组

Question

我在查询集合时尝试添加所有 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 的预期数组值，只是产品 name

Answer 1

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

以下使用对象扩展运算符创建新的普通对象应该可以解决问题：

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

Vuexfire {serialize} 选项没有正确格式化数组

Vuexfire {serialize} option not formatting array properly

firebase

vue.js

vuex

vuefire

vuexfire