使用无限加载组件时，我的Vue存储正在消耗我的内存使用量

Question

Vue的新增功能，当点击页面底部时，正在使用无限加载程序插件来加载更多结果。它使用其中包含约6个属性的视图模型加载约50个结果。因此，通过网络发送的总数据大小约为18kb，不是很大。但是，当新获取的数据被推送到存储区时，它将占用30-50MB的内存。每次我们获取时都会执行此操作！只需几次获取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
    },
  },
}