Vue를 사용하여 스택 크기를 초과한 비동기 함수

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)

그리고 또 다른 유사한 오류 행이 여러 개 있습니다.

이 함수는 이전에 다음 행을 사용했을 때 기능했습니다.

this.updatePandasProfile(report)

나는 간단히 이것을 먹었다.

this.generatedhtml = report

하지만 나는 이사했다.generatedhtmlvuex 저장 및 getters 및 작업 생성에 대해 설명합니다.report값을 상태 변수로 설정합니다.

mutations.js

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

actions.js

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

getters.js

generatedhtml: state => state.generatedhtml

그 컴포넌트에 getter를 사용하고 있는데generatePP()메서드라고 불립니다.

왜 이런 일이 일어났는지 아십니까?

편집: 이것도 추가하고 싶습니다.reportvariable의 사이즈는 꽤 큽니다(약 4,6 mb).이것은 generated html 파일입니다.

언급URL : https://stackoverflow.com/questions/61754715/async-function-resulting-in-stack-size-exceeded-using-vue