vue.js - 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

当观察普通对象(而Audio不是)时，Vue的效果最佳。 Vue无法检测到currentTime属性何时更改。

从docs:

The object must be plain: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.

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