Pagination using document reference object stored in vuex state

[Evaldas-B]

How do you deal with pagination using reference objects?

export const state = () => ({
  listings: [],

  pagination: {
    currentPage: 0,
    perPage: 5,
    nextPage: null, <-- This should be a document reference object
    previousPage: null <-- This should be a document reference object
  }
});

How do you save the reference of a document for pagination purposes without getting the do not mutate vuex store state outside mutation handlers error? The document reference object has a life of its own, it changes state unpredictably. A couple of solutions that come to my mind is:

1. Using Lodash _.cloneDeep() on the reference object
2. Instead of using a reference object as a pointer, is to use a field (That would limit queries. For ex. limits query to have only 1 orderBy)
3. In Vuex store save only the id of the document and before paginating fetch the document to use as a cursor. (It would take 2 requests to the firebase to retrieve the data)

[Evaldas-B]

Freezing cursor reference object before committing it to state seems to do the trick:
Object.freeze(nextPage)