Question

我只是在学习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结果并尝试推送它们时，我在控制台中看到一条错误消息：

未捕获（承诺）RangeError：超出最大调用堆栈大小在Array.mutator（vue.js：883）在.... \ record-search.vue：909

每个对象都不大，我可以将'response.data'放入新的Javascript数组[]中而不会出现任何错误。

问题-我可以增加保存数据的'$ state.store.records'的大小，以免出现此错误并可以在页面中显示所有81K结果吗？我不介意渲染需要几秒钟，我有一个微调器。

Answer 1

尝试一次设置this.list的值，而不是.push将所有81k项放入其中：

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

在vue.js项目中增加$ state.store.object的大小

1 个答案: