Vuex getter实时更新audio.currentTime状态

Question

我想让Vuex存储中的音频播放器使用它的数据输出到Vue组件中的自定义音频播放器。

在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。但是，当我按下“暂停”时，当前时间将被正确显示。

请帮帮忙。

Answer 1

Vue在观察普通对象时效果最好，而Audio不是。Vue无法检测currentTime属性何时更改。

来自文档

对象必须是简单的:忽略本机对象(如browser、API对象、和prototype属性)。经验法则是，数据应该只是数据--不建议观察具有自己有状态行为的对象。

最好的解决方案是生成自己的currentTime number属性，并在播放音频时使用setInterval周期性地将其值同步到audio.currentTime，并在暂停音频时清除间隔。

Answer 2

store.js

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

Component.vue

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

<script>
  import { mapGetters } from 'vuex'

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