Javascript 为什么mounted（）超出了调用堆栈的最大大小？

当我尝试初始化浏览器的音频API时，Vue.js会给我

挂载钩子中的错误：“RangeError:超过最大调用堆栈大小”`

我制作了一个包含音频标签的Audioapi组件

<template>
  <audio controls></audio>
</template>

<script>
  export default {
    mounted () {
      var vm = this
      vm.$store.dispatch('Player/init', vm.$el)
    }
  }
</script>

我将

控制台.log

放在

挂载的
中，它只被调用一次。所有东西都需要在存储中，因为许多其他组件都需要访问这些变量

导致此错误的原因是什么？如何修复它？
您确定只调用一次吗？我希望它被无限调用，因为您正在变异
vm.$el
，这将导致
mounted（）
被反复调用。也许浏览器优化检测到了这一点，并抛出了您得到的错误，而不是控制台日志记录多次。感谢您的评论@connexo，那么我应该如何做呢？
const state = {
  myAudio: null,
  audioCtx: null,
  analyser: null,
  distortion: null,
  gainNode: null,
  biquadFilter: null
}

const mutations = {
  INIT (state, payload) {
    state.myAudio = payload
    // Create audio elements
    state.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
    state.analyser = state.audioCtx.createAnalyser()
    state.distortion = state.audioCtx.createWaveShaper()
    state.gainNode = state.audioCtx.createGain()
    state.biquadFilter = state.audioCtx.createBiquadFilter()

    // Connect everything together
    state.source = state.audioCtx.createMediaElementSource(state.myAudio)
    state.source.connect(state.analyser)
    state.analyser.connect(state.distortion)
    state.distortion.connect(state.biquadFilter)
    state.biquadFilter.connect(state.gainNode)
    state.gainNode.connect(state.audioCtx.destination) // connecting the different audio graph nodes together
  }
}
const getters = {
}
const actions = {
  init ({ commit }, payload) {
    console.log(payload)
    commit('INIT', payload)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}