javascript - Vuexfire bindFirestoreRef does not seem to wait for binding to be completely resolved

Question

I have a weird scenario in play when binding to a firestore collection. I am doing batched reads by serializing the data using the serialize option provided by vuexfire. But that does not seem to be an issue because I've tried it without serializing as well. Basically, I am getting 5 documents. But I notice that when the code in the then() function runs, it's only getting 1 document (even though I know there are 5). The console log shows that the events.length is 1. I had to use events.slice() to log the actual events because without it, it does indeed show 5 events. This is because by the time the console.log runs, it has retrieved all 5 events. So, my question is why does the bind complete prematurely? According to the vuexfire documentation:

Returns a Promise that is resolved once the data has been completely fetched and synced into the state.

I only call this function once so if the documentation is correct, shouldn't all 5 events be fetched before the promise is resolved?

    bindAllPendingEventsBatch: firestoreAction(async (context) => {
      return context.bindFirestoreRef('allPendingBatch',
        Firebase.firestore().collection('events')
          .where('dateEnd', '>', new Date())
          .orderBy('dateEnd', 'asc')
          .limit(5)
          .startAfter(context.state.loadMoreLastEventAllPending || null),
        { serialize: customSerializer }).then(events => {
        console.log('GOT PENDING EVENTS:', events.slice(), events.slice().length)
        // without the .slice() 5 events are printed but length is 1. 
        context.commit('MERGE_EVENTS_BATCH_ALL_PENDING', { events })
        context.commit('SET_ALL_PENDING_LOAD_MORE_DOC') // sets the last document
        if (events.length < 5) {
          context.commit('ALL_PENDING_EVENTS_LOADED')
        }
      })
    })

MORE INFORMATION: After debugging some more, I have some more information. It seems you cannot bind the same data to two different state variables? In addition to the pendingEvents binding, I have another binding that takes place before that binds some of the same data to another store variable. If I comment out that binding, everything works as expected (except that other data I was binding is no longer available). I don't think I saw this in the vuexfire documentation. It only mentions that if you use the same state variable to REbind data, it will automatically unbind. But it does not mention that a different state variable cannot be bound to the same data?? Anyone have any experience with this?

Answer 1

等待大神解答