firebase - Vuexfire 将 Firestore 集合绑定到 Object 而不是 List

Question

我的 Firestore 数据库中有以下集合：

我可以使用以下内容绑定到我的 vuex 商店：

state: {
  assets: [],
},

actions: {
  bindAssets: firestoreAction(({ bindFirestoreRef }) => {
    return bindFirestoreRef('assets', db.collection('assets'))
  }),
},

然而，这将它们绑定assets为一个列表，即

[
  {id: "id1" /* etc. */ },
  {id: "id2" /* etc. */ },
  {id: "id3" /* etc. */ },
]

在哪里，我希望它被绑定为：

{
  "id1": { /* etc. */ },
  "id2": { /* etc. */ },
  "id3": { /* etc. */ },
}

我怎样才能做到这一点？

Answer 1

如果要在 Object 中转换assets数组（通过绑定assets集合获得）如下所示

{
  "id1": { /* etc. */ },
  "id2": { /* etc. */ },
  "id3": { /* etc. */ },
}

以下 Vuex getter 应该可以解决问题：

state: {
  assets: [],
},

actions: {
  bindAssets: firestoreAction(({ bindFirestoreRef }) => {
    return bindFirestoreRef('assets', db.collection('assets'))
  }),
},

getters: {
     assetsObj: state => {

         const arrayToObject = (array) =>
            array.reduce((obj, item) => {
                 obj[item.id] = item
                 return obj
            }, {})

        return arrayToObject(state.assets)

    }
}

---

根据您的评论更新（在聊天中）：

如果您只想绑定到一个文档，您应该执行以下操作，使用bindAssetDoc和assetDoc。

店铺

state: {
    assets: [],
    assetDoc: null
},

mutations: vuexfireMutations,

actions: {
    bindAssetDoc: firestoreAction(({ bindFirestoreRef }, payload) => {
        return bindFirestoreRef('assetDoc', db.collection('assets').doc(payload.id))
    }),
    bindAssets: firestoreAction(({ bindFirestoreRef }) => {
        return bindFirestoreRef('assets', db.collection('assets'))
    })
}

COMPONENT 通过打开/asset/:assetId

<script>
//...
export default {
  created() {
    console.log('OK1');
    this.$store
      .dispatch('bindAssetDoc', { id: this.$route.params.assetId });
  }
};
</script>

Answer 2

根据 vuexfire 的官方文档，您需要使用{}而不是初始化您的状态[]

state: {
  assets: {},  // instead of []
},