Question

当我尝试初始化浏览器的音频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>

安装后，它将调用一个函数来初始化商店中的Javascript部分。它创建音频上下文并将所有内容连接在一起。

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
}

我将console.log放在mounted中，它只被调用一次。一切都需要存储，因为其他许多组件也需要访问这些变量。

是什么导致此错误，我该如何解决？

为什么mount（）给我超出了最大调用堆栈大小？

0 个答案: