时间戳

首页 > 解决方案 > Vuex getter 实时更新 audio.currentTime 状态

vue.js - Vuex getter 实时更新 audio.currentTime 状态

问题描述

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

在 Vuex 商店中有一个aplayer播放音乐的 state 属性。 store.js代码：

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

在我想显示aplayer.currentTime当前歌曲的组件中。我试图通过getPlayer在计算属性中使用 getter 来获取它。

components.vue代码：

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

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

请帮忙。

标签： vue.jsvuejs2vuex

解决方案

Vue 在观察普通对象时效果最好，但事实Audio并非如此。Vue 无法检测到currentTime属性何时发生变化。

从文档：

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

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

推荐阅读