Vue.js Vuex getters实时更新audio.currentTime状态

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

在Vuex商店中，有一个播放音乐的状态属性

aplayer

。

store.js

code:

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

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

在组件中，我想显示当前歌曲的

aplayer.currentTime

。我试图通过在计算属性中使用getter

getPlayer

来获取它

组件.vue

代码：

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

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

但当输出到模板时，当前时间冻结为0。但是，当我按“暂停”时，当前时间显示正确

请帮忙。

store.js

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

组件.vue

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

<script>
  import { mapGetters } from 'vuex'

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

{{getCurrentTime}}
从“vuex”导入{mapGetters}
导出默认值{
计算：{
…映射获取程序（['getCurrentTime']）
}
}

Vue在观察普通对象时效果最好，而

音频

则不是。Vue无法检测

currentTime

属性何时更改

从：

对象必须是普通对象：忽略浏览器API对象等本机对象和原型属性。经验法则是，数据应该只是数据——不建议观察具有自身有状态行为的对象

您最好的解决方案是在播放音频时使用

setInterval

定期生成自己的

currentTime

number属性并将其值同步到

audio.currentTime

，并在音频暂停时清除间隔。

现在currentTime始终为0（即使在按下“暂停”按钮之后）