Блог

Главная - Вопросы по программированию - Увеличение размера $state.store.object в vue.js проект

Увеличение размера $state.store.object в vue.js проект

#javascript #html #vue.js

#javascript #HTML #vue.js

Вопрос:

Я только изучаю vue и вижу, что приложение, над которым я работаю, извлекает данные из базы данных, затем помещает их в список, подобный этому, перед привязкой и отображением на странице:

 if (response.data.length > 1) {
  this.list.push(...response.data)
  $state.loaded()
  if (response.data == 0) {
    $state.complete()
  }
} else {
  $state.complete()
}

где приведенная ниже коллекция списков находится в разделе скриптов страницы .vue.

 export default {

  computed: {
    list: {
      get() {
        return this.$store.state.records.list
      },
      set(value) {
        this.$store.commit('records/listUpdate', value)
      }
    }
  }
}

Проблема, когда я извлекаю все данные ~ 81K результатов и пытаюсь их отправить, я получаю ошибку в консоли, которая гласит:

Неперехваченная (в обещании) ошибка диапазона: превышен максимальный размер стека вызовов в Array.mutator (vue.js: 883) в ….record-search.vue:909

Каждый объект не такой уж большой, и я могу поместить ‘response.data’ в новый массив Javascript [] без каких-либо ошибок.

Вопрос — могу ли я увеличить размер ‘$ state.store.records’, где хранятся данные, чтобы я не получал эту ошибку и мог отображать все результаты 81K на странице? Я не возражаю, если рендеринг займет несколько секунд, у меня есть счетчик.

Ответ №1:

Попробуйте установить this.list значение за один раз, а не .push все 81 тыс. элементов в нем:

 this.list = [].concat(this.list, response.data);

Комментарии:

1. да, это работает, но теперь для отображения на экране требуется вечность. Он все еще работает ….. через пару минут. Запрос на извлечение данных из базы данных занимает всего около 3 секунд.

2. Ну, а чего вы ожидали? 81k элементов было бы довольно тяжело визуализировать 🙂

3. Я не очень хорошо знаком с Vue, есть ли способ ускорить это? Клиенты хотят ускорить процесс, и в настоящее время существует бесконечная прокрутка, которая извлекает только 50 результатов одновременно. Поскольку результатов может быть 81 тыс., для прокрутки вниз по 81 тыс. результатов потребуется целая жизнь. Старое приложение извлекается в файл, а затем отображается из файла. Я подумал, что Vue мог бы просто преобразовать это в простую таблицу, разве это не было бы быстро?

4. Меня не волнует, если это займет до 10-15 секунд, я могу отобразить счетчик или что-то в этом роде, но я запускаю eit уже пару минут, и он все еще не завершил отображение результатов на экране

5. Вы забыли, что Vue добавляет реактивность и создает DOM. Я бы посоветовал вам рассмотреть разбивку на страницы, потому что 81k результатов на одной странице никогда не бывает хорошим.