Vue.js 异步函数导致使用Vue超出堆栈大小

所以我有这个方法：

   async generatePP() {
      if (this.generatedhtml == null && this.generating === false) {
        console.log("generating html");
        this.loading = true;
        this.generating = true;
        const report = await window.eel.ProfilingReportTest()();
        console.log("generated");
        console.log(report);
        this.loading = false;
        this.updatePandasProfile(report)
        this.generating = false;
      } else {
        console.log("already generated or in progress");
      }
    }

现在，当调用此方法时，我得到以下错误：

RangeError: Maximum call stack size exceeded
    at Function.keys (<anonymous>)
    at _traverse (vue.runtime.esm.js?2b0e:2121)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    .
    .
    .
    at traverse (vue.runtime.esm.js?2b0e:2100)
    at Watcher.get (vue.runtime.esm.js?2b0e:4490)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554)
    at Watcher.update (vue.runtime.esm.js?2b0e:4542)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Object.reactiveSetter [as generatedhtml] (vue.runtime.esm.js?2b0e:1055)
    at Store.updatePandasProfile (mutations.js?c559:64)
    at wrappedMutationHandler (vuex.esm.js?2f62:744)
    at commitIterator (vuex.esm.js?2f62:392)
    at Array.forEach (<anonymous>)
    at eval (vuex.esm.js?2f62:391)
    at Store._withCommit (vuex.esm.js?2f62:526)
    at Store.commit (vuex.esm.js?2f62:390)
    at Store.boundCommit [as commit] (vuex.esm.js?2f62:335)
    at Object.local.commit (vuex.esm.js?2f62:696)
    at Store.updatePandasProfileAction (actions.js?dab0:62)
    at Array.wrappedActionHandler (vuex.esm.js?2f62:751)
    at Store.dispatch (vuex.esm.js?2f62:442)
    at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:332)
    at Store.local.dispatch (vuex.esm.js?2f62:679)
    at VueComponent.mappedAction (vuex.esm.js?2f62:964)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as updatePandasProfileAction] (vue.runtime.esm.js?2b0e:4836)
    at _callee$ (PandasProfiling.vue?7527:112)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:274)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
    at asyncGeneratorStep (asyncToGenerator.js?fa84:5)
    at _next (asyncToGenerator.js?fa84:27)

actions.js

  updatePandasProfile (state, html) {
    state.generatedhtml = html;
  },

  updatePandasProfileAction(context, html) {
    context.commit('updatePandasProfile', html)
  }

generatedhtml: state => state.generatedhtml

getters.js

  updatePandasProfile (state, html) {
    state.generatedhtml = html;
  },

  updatePandasProfileAction(context, html) {
    context.commit('updatePandasProfile', html)
  }

generatedhtml: state => state.generatedhtml

我在调用

generatePP（）

方法的组件中使用getter

知道为什么会这样吗

编辑：

---

我还想补充一点，这个

报表

变量的大小相当大（大约4,6mb）-它是一个已生成的html文件。

您是否查看在使用getter后对generatedhtml所做的更改？为什么我需要查看更改，因为getter本身已经是

计算的

？我们可以从，我有几个问题。

\u traverse

函数是Vue遍历对象属性的地方。理论上，嵌套非常深的结构可能会使调用堆栈溢出，但这不太可能。仅仅是一个大物体是不够的。如果不访问

报告

对象，就很难准确地知道问题所在。您可能希望尝试在调试器中单步执行，以查看导致问题的属性。如果

report

是静态的，并且您不想修改它的内容，那么您应该将它通过

对象。冻结
并完全回避这个问题。@skille
report
基本上是由这个库生成的一个完整的静态站点。生成后，我将这个html变量放入一个iframe中，就这样。当把所有东西都放在一个组件中时，它就可以工作了，但由于它会使代码膨胀，所以我考虑将其组件化一点。但是，在Vuex中放置该html变量后，我会出现如上所述的错误。