Vuex getters 오디오 업데이트 실시간current Time 상태

Vuex getters 오디오 업데이트 실시간current Time 상태

Vue 컴포넌트의 커스텀 오디오 플레이어로 출력하기 위해 Vuex 스토어의 오디오 플레이어를 사용하고 싶다.

Vuex 스토어에 상태 속성이 있습니다.aplayer음악을 틀고 있어요. store.js코드:

state: {
  aplayer: new Audio()
},
getters: {
  getCurrentTime: state => state.aplayer.currentTime
}

표시할 컴포넌트aplayer.currentTime요즘 노래.나는 getter를 사용해서 그것을 얻으려고 한다.getPlayer계산 속성에 있습니다.

components.vue코드:

getCurrentTime() {
  return this.$store.getters.getCurrentTime;
}

그러나 템플릿으로 출력할 경우 현재 시간은 0으로 고정됩니다.다만, 「일시정지」를 누르면, 현재 시각이 올바르게 표시됩니다.

제발 도와주세요.

Vue는 일반 개체를 관찰할 때 가장 잘 작동합니다.Audio그렇지 않습니다.Vue는 다음 시간을 감지할 수 없습니다.currentTime속성이 변경됩니다.

문서에서:

개체는 일반 개체여야 합니다. 브라우저 API 개체 및 프로토타입 속성과 같은 기본 개체는 무시됩니다.경험의 법칙은 데이터는 데이터여야 한다는 것입니다. 객체의 상태 저장 동작을 관찰하는 것은 권장되지 않습니다.

가장 좋은 해결책은 직접 생성하는 것입니다.currentTime속성에 번호를 매겨 값을 동기화합니다.audio.currentTime을 사용하여 정기적으로setInterval오디오가 재생되고 있는 동안은, 오디오가 일시 정지하고 있는 간격을 클리어 합니다.

store.displaces를 설정합니다.

state: {
  aplayer: new Audio()
},
getters: {
  getCurrentTime: state => state.aplayer.currentTime
}

요소.표시하다

<template>
  <div>{{getCurrentTime}}</div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters(['getCurrentTime'])
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/57410904/vuex-getters-real-time-updating-audio-currenttime-state