vue.js - 挂载钩子中的错误：“RangeError：超出最大调用堆栈大小”VUEJS

Question

我在我的 vuejs 应用程序中有以下 router.js

import Vue from 'vue'
import Router from 'vue-router'

import {client_auth, annotator_auth} from './middleware/auth'
import {reroute_home} from '@/middleware/reroute'
import Editor from './components/editor/Editor.vue'

Vue.use(Router)

const router =  new Router({
    {
      path: '/annotator/studio',
      name: 'annotator_studio',
      component: Editor,
      props: (route) => ({
        image_id: route.query.q
      }),
      meta: {
        title: "Annotation Studio",
        middleware: annotator_auth
      }
    }
  ]
})


function nextFactory(context, middleware, index) {
  const subsequentMiddleware = middleware[index];
  if (!subsequentMiddleware) return context.next;

  return (...parameters) => {
    context.next(...parameters);
    const nextMiddleware = nextFactory(context, middleware, index + 1);
    subsequentMiddleware({ ...context, next: nextMiddleware });
  };
}

router.beforeEach((to, from, next) => {
  if (to.meta.middleware) {
    const middleware = Array.isArray(to.meta.middleware)
      ? to.meta.middleware
      : [to.meta.middleware];

    const context = {
      from,
      next,
      router,
      to,
    };
    const nextMiddleware = nextFactory(context, middleware, 1);
    return middleware[0]({ ...context, next: nextMiddleware });
  }

  return next();
});

export default router;

以下是我的 Editor.uve

<template>
    <div id="container">

        <div id="view-item">
            <app-view/>
        </div>

    </div>

</template>

<script>
    import View from './view/View.vue'

    export default {
        components: {
            'app-view': View,
        }
    }
</script>

<style scoped>
    #container {
        display: flex;
        flex-flow: column;
        height: 100%;
    }

    #stepper-item {
        flex: 0 1 auto;
        margin: 5px;
    }

    #view-item {
        display: flex;
        flex: 1 1 auto;
        margin: 0px 5px 5px 5px;
    }
</style>

在此Editor.uve我正在导入一个名为View.vue. 以下是我的View.vue

<template lang="html">

  <div
    id="view"
    class="elevation-2 pointers-please">

    <app-osd-canvas/>

    <app-annotation-canvas/>

  </div>

</template>

<script>
import { mapState, mapActions } from 'vuex'

import OSDCanvas from './OSDCanvas.vue'
import AnnotationCanvas from './AnnotationCanvas.vue'

export default {
  components: {
    'app-osd-canvas': OSDCanvas,
    'app-annotation-canvas': AnnotationCanvas
  },

  computed: {
    ...mapState({
      projectImageName: state => state.image.projectImageName
    })
  },

  async mounted () {
      await this.setProjectImageName('demo')
        this.loadDemo()
  },

  methods: {
    ...mapActions({
      setProjectImageName: 'image/setProjectImageName',
      loadDemo: 'editor/loadDemo',
      loadProject: 'editor/loadProject'
    })
  }
}
</script>

<style scoped>
#view {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}
</style>

在此View.vue我再次导入一个名为 OSDCanvas 的子组件。我的OSDCanvas.uve样子如下。

<template lang="html">
  <div id="osd-canvas" />
</template>

<script>
import { mapActions } from 'vuex'

export default {
  mounted () {
    this.setupOsdCanvas('osd-canvas')
  },

  methods: {
    ...mapActions({
      setupOsdCanvas: 'image/setupOsdCanvas'
    })
  }
}
</script>

<style>
#osd-canvas {
  position: absolute;
  height: 100%;
  width: 100%;
}
</style>

当我点击/annotator/studio路线时，我面临以下错误

[Vue warn]: Error in mounted hook: "RangeError: Maximum call stack size exceeded" found in
---> <AppOsdCanvas> at src/components/editor/view/OSDCanvas.vue
       <AppView> at src/components/editor/view/View.vue
         <Editor> at src/components/editor/Editor.vue
           <VContent>
             <VApp>
               <App> at src/App.vue
                 <Root>

我也尝试了一些在线解决方案，但问题仍然相同。任何帮助表示赞赏。

以下更新 是存储中 actions.js 中的 image/setupOsdCanvas

setupOsdCanvas: ({
                         commit
                     }, payload) => {
        commit('setupOsdCanvas', payload)
    },

接下来是商店中的 mutation.js 中的 setupOsdCanvas

setupOsdCanvas: (state, payload) => {
        state.OSDviewer = new openseadragon.Viewer({
            id: payload,
            showNavigationControl: false,
            showNavigator: true,
            navigatorId: 'navigator',
            maxZoomPixelRatio: 2
        })

        // Prevent rotation and 'flipping' of the image through the default keybaord
        // shortcuts, R and F. (these were conflicting with other annotation tool
        // shortcuts when the image was open)
        state.OSDviewer.addHandler('canvas-key', e => {
            if (e.originalEvent.code === 'KeyR' || e.originalEvent.code === 'KeyF') {
                e.preventDefaultAction = true
            }
        })
    }