Мой магазин Vue взрывает использование моей памяти при использовании бесконечной загрузки компонента - PullRequest
Новая
       8

Мой магазин Vue взрывает использование моей памяти при использовании бесконечной загрузки компонента

1 голос
/ 10 апреля 2019

Новичок в Vue и использует плагин с бесконечным загрузчиком, чтобы загружать больше результатов при достижении нижней части страницы.Он загружает около 50 результатов с моделью представления, которая имеет около 6 свойств.Таким образом, общий объем данных, отправляемых по сети, составляет около 18 КБ, не очень большой.Но когда новые извлеченные данные помещаются в хранилище, они увеличивают объем памяти на 30-50 МБ.И он делает это каждый раз, когда мы получаем!После нескольких загрузок IE бомбардирует и становится очень медленным.

Вот пара фрагментов, чтобы показать, что мы делаем

в ответе axios / ajax, который мы отправляем в Vue, данныехранилище данных 

}).then(response => {
  this.list.push(...response.data)
  // tried below but still blows up memory and speed
  this.list = [].concat(this.list, response.data);
})

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

И в моем файле index.js у меня есть такие мутации / действия 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const appRoot = {
  ...
}

const records = {
  namespaced: true,
  state: {
    witnessName: null,
    sourceCode: null,
    startDate: null,
    startDateFormatted: null,
    endDate: null,
    endDateFormatted: null,
    jobsiteCode: null,
    jobsiteName: null,
    defendantCode: null,
    defendantName: null,
    shipName: null,
    info: null,
    createdBy: null,
    recordId: null,
    pageSize: 50,
    list: [],
    distance: -Infinity,
    pagination: {
      sortBy: 'sourceCode',
      descending: false,
      rowsPerPage: -1
    },
    defaultSortBy: 'sourceCode',
    defaultDescending: false,
    showList: false,
    lastClickedId: null,
    lastViewedId: null,
    refListIndex: null,
    refList: [],
    // recordProducts
    recordProductsList: [],
    recordProductsDistance: -Infinity,
    recordProductsPagination: {
      sortBy: 'defendantCode',
      descending: false,
      rowsPerPage: -1
    },
    recordProductsDefaultSortBy: 'defendantCode',
    recordProductsDefaultDescending: false,
    recordProductsShowList: false,
    recordProductsLastClickedId: null,
    recordProductsLastViewedId: null,
    recordProductsRefListIndex: null,
    recordProductsRefList: [],
    // recordCoworkers
    recordCoworkersList: [],
    recordCoworkersDistance: -Infinity,
    recordCoworkersPagination: {
      sortBy: 'coworkerName',
      descending: false,
      rowsPerPage: -1
    },
    recordCoworkersDefaultSortBy: 'coworkerName',
    recordCoworkersDefaultDescending: false,
    recordCoworkersShowList: false,
    recordCoworkersLastClickedId: null,
    recordCoworkersLastViewedId: null,
    recordCoworkersRefListIndex: null,
    recordCoworkersRefList: [],
  },
  mutations: {
    witnessNameUpdate(state, value) {
      state.witnessName = value
    },
    sourceCodeUpdate(state, value) {
      state.sourceCode = value
    },
    startDateUpdate(state, value) {
      state.startDate = value
    },
    startDateFormattedUpdate(state, value) {
      state.startDateFormatted = value
    },
    endDateUpdate(state, value) {
      state.endDate = value
    },
    endDateFormattedUpdate(state, value) {
      state.endDateFormatted = value
    },
    jobsiteCodeUpdate(state, value) {
      state.jobsiteCode = value
    },
    jobsiteNameUpdate(state, value) {
      state.jobsiteName = value
    },
    defendantCodeUpdate(state, value) {
      state.defendantCode = value
    },
    defendantNameUpdate(state, value) {
      state.defendantName = value
    },
    shipNameUpdate(state, value) {
      state.shipName = value
    },
    infoUpdate(state, value) {
      state.info = value
    },
    createdByUpdate(state, value) {
      state.createdBy = value
    },
    recordIdUpdate(state, value) {
      state.recordId = value
    },
    listUpdate(state, value) {
      state.list = value
    },
    distanceUpdate(state, value) {
      state.distance = value
    },
    paginationUpdate(state, value) {
      state.pagination = value
    },
    defaultSortByUpdate(state, value) {
      state.defaultSortBy = value
    },
    defaultDescendingUpdate(state, value) {
      state.defaultDescending = value
    },
    showListUpdate(state, value) {
      state.showList = value
    },
    lastClickedIdUpdate(state, value) {
      state.lastClickedId = value
    },
    lastViewedIdUpdate(state, value) {
      state.lastViewedId = value
    },
    refListIndexUpdate(state, value) {
      state.refListIndex = value
    },
    refListUpdate(state, value) {
      state.refList = value
    },
    // recordWitnesses
    recordWitnessesListUpdate(state, value) {
      state.recordWitnessesList = value
    },
    recordWitnessesDistanceUpdate(state, value) {
      state.recordWitnessesDistance = value
    },
    recordWitnessesPaginationUpdate(state, value) {
      state.recordWitnessesPagination = value
    },
    recordWitnessesDefaultSortByUpdate(state, value) {
      state.recordWitnessesDefaultSortBy = value
    },
    recordWitnessesDefaultDescendingUpdate(state, value) {
      state.recordWitnessesDefaultDescending = value
    },
    recordWitnessesShowListUpdate(state, value) {
      state.recordWitnessesShowList = value
    },
    recordWitnessesLastClickedIdUpdate(state, value) {
      state.recordWitnessesLastClickedId = value
    },
    recordWitnessesLastViewedIdUpdate(state, value) {
      state.recordWitnessesLastViewedId = value
    },
    recordWitnessesRefListIndexUpdate(state, value) {
      state.recordWitnessesRefListIndex = value
    },
    recordWitnessesRefListUpdate(state, value) {
      state.recordWitnessesRefList = value
    },
    // recordProducts
    recordProductsListUpdate(state, value) {
      state.recordProductsList = value
    },
    recordProductsDistanceUpdate(state, value) {
      state.recordProductsDistance = value
    },
    recordProductsPaginationUpdate(state, value) {
      state.recordProductsPagination = value
    },
    recordProductsDefaultSortByUpdate(state, value) {
      state.recordProductsDefaultSortBy = value
    },
    recordProductsDefaultDescendingUpdate(state, value) {
      state.recordProductsDefaultDescending = value
    },
    recordProductsShowListUpdate(state, value) {
      state.recordProductsShowList = value
    },
    recordProductsLastClickedIdUpdate(state, value) {
      state.recordProductsLastClickedId = value
    },
    recordProductsLastViewedIdUpdate(state, value) {
      state.recordProductsViewedClickedId = value
    },
    recordProductsRefListIndex(state, value) {
      state.recordProductsRefListIndex = value
    },
    recordProductsRefList(state, value) {
      state.recordProductsRefList = value
    },
    recordCoworkersListUpdate(state, value) {
      state.recordCoworkersList = value
    },
    recordCoworkersDistanceUpdate(state, value) {
      state.recordCoworkersDistance = value
    },
    recordCoworkersPaginationUpdate(state, value) {
      state.recordCoworkersPagination = value
    },
    recordCoworkersDefaultSortByUpdate(state, value) {
      state.recordCoworkersDefaultSortBy = value
    },
    recordCoworkersDefaultDescendingUpdate(state, value) {
      state.recordCoworkersDefaultDescending = value
    },
    recordCoworkersShowListUpdate(state, value) {
      state.recordCoworkersShowList = value
    },
    recordCoworkersLastClickedIdUpdate(state, value) {
      state.recordCoworkersLastClickedId = value
    },
    recordCoworkersLastViewedIdUpdate(state, value) {
      state.recordCoworkersLastViewedId = value
    },
    recordCoworkersRefListIndexUpdate(state, value) {
      state.recordCoworkersRefListIndex = value
    },
    recordCoworkersRefListUpdate(state, value) {
      state.recordCoworkersRefList = value
    },
  },
}
...