Firestore / Nuxt - Как мне избежать мутационного вложения от следующего набора результатов? - PullRequest
Новая
       34

Firestore / Nuxt - Как мне избежать мутационного вложения от следующего набора результатов?

0 голосов
/ 29 мая 2019

Я пытаюсь создать свое приложение, чтобы оно не считывало все 200+ документов при загрузке, а несколько при загрузке и захватывало остальные при прокрутке вниз.

У меня есть рабочий код, который позволяет мне получить страницу результатов, скажем, 2, затем нажать «Далее» и получить следующие 2, но я хочу, чтобы следующие 2 были добавлены к последнему, чтобы пользователь мог прокрутить назад.

Я пытаюсь вставить свою мутацию, но это создает вложенный беспорядок. Возвращает 3 с последним, имеющим 2.

Мутация 

setAddons(state, payload) {
        state.addons = payload;
      },
      nextAddons(state, payload) {
        state.addons.push(payload);
      },

Мои 2 действия. Каждый загружается со страницей, чтобы захватить первый набор. Второе, прямо сейчас, когда я нажимаю кнопку, но, надеюсь, связывается с событием прокрутки, как только я это отсортировал. 

async firstAddons({ commit }) {
        let addonsData = [];

        return await db
          .collection('addons')
          .where('publish', '==', true)
          .orderBy('timeUpdated', 'desc')
          .limit(10)
          .get()
          .then(querySnapshot => {
            querySnapshot.forEach(doc => {
              addonsData.push({
                ...doc.data(),
                id: doc.id,
                timeUpdated: doc.data().timeUpdated.toDate(),
                timeCreated: doc.data().timeCreated.toDate()
              });
              let last = querySnapshot.docs[querySnapshot.docs.length - 1];
              commit('setLast', last);
            });
            commit('setAddons', addonsData);
          });
      },

      async nextAddons({ commit, state }) {
        let addonsData = [];

        await db
          .collection('addons')
          .where('publish', '==', true)
          .orderBy('timeUpdated', 'desc')
          .startAfter(state.last.data().timeUpdated)
          .limit(10)
          .get()
          .then(querySnapshot => {
            querySnapshot.forEach(doc => {
              addonsData.push({
                ...doc.data(),
                id: doc.id,
                timeUpdated: doc.data().timeUpdated.toDate(),
                timeCreated: doc.data().timeCreated.toDate()
              });
              let next = querySnapshot.docs[querySnapshot.docs.length - 1];
              commit('setLast', next);
            });
            commit('nextAddons', addonsData);
            console.log(state.addons);
          });
      },

Что возвращается 

(3) [{…}, {…}, Array(2), __ob__: Observer]
0: {…}
1: {…}
2: Array(2)
  0: {…}
  1: {…}
  length: 2
length: 3

Ожидаемые результаты состоят в том, что следующая страница результатов должна быть перенесена в конец последних результатов и продолжена.

Фактические результаты: массив помещает каждый набор во вложенный массив.

Как я могу собрать их в один непрерывный массив для использования в моем шаблоне?

Спасибо

1 Ответ

0 голосов
/ 29 мая 2019

Решено и чувствую себя как допинг.

Оказывается, это было так же просто, как использовать спред. 

setAddons(state, payload) {
        state.addons = payload;
      },
      nextAddons(state, payload) {
        state.addons.push(...payload);
      },

Это работает!

...