Increasing the size of $state.store.object in a vue.js project

Question

I'm just learning vue and I see that the application I'm working on fetches data from a db then puts it into a list like this before it binds and displays it on the page:

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

where the list collection below is in the script section of the .vue page.

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

Problem, when I fetch all data ~81K results and try and push them I get an error in the console that says:

Uncaught (in promise) RangeError: Maximum call stack size exceeded at Array.mutator (vue.js:883) at ....\\record-search.vue:909

Each object isn't that big and I can put the 'response.data' into a new Javascript array [] without any errors.

Question - can I increase the size of the '$state.store.records' where the data is being held so that I don't get this error and can display all 81K results in the page? I don't mind if it takes a few seconds to render, I have a spinner.

Answer 1

尝试一次性设置this.list值，而不是.push所有81k项目：

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