Vuexfire связывает коллекцию Firestore с объектом вместо списка - PullRequest
Новая
       135

Vuexfire связывает коллекцию Firestore с объектом вместо списка

0 голосов
/ 08 апреля 2020

В моей базе данных Firestore есть следующая коллекция:

scheme

, которую я могу связать со своим магазином vuex с помощью следующего: 

state: {
  assets: [],
},

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

Однако это связывает их с assets в виде списка, т.е. 1018 * Как мне этого добиться?

1 Ответ

1 голос
/ 08 апреля 2020

Если вы хотите преобразовать массив assets (полученный путем связывания коллекции assets) в объект, как показано ниже 

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

, то следующий получатель Vuex должен сделать трюк: 

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.

STORE 

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'))
    })
}

КОМПОНЕНТ, открытый через /asset/:assetId

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