Vue에서 오디오 및 비디오 요소를 캡슐화하고 구현하는 방법은 무엇입니까?

export default { // ... data() { return { url: "/path/to/audio/file", playing: false, muted: false }; }, methods: { playAudio() { const audio = this.$refs.audioRef; if (audio.paused) { audio.play(); } else { audio.pause(); } this.playing = !this.playing; }, toggleMute(){ const audio = this.$refs.audioRef; audio.muted = !audio.muted; this.muted = !this.muted; } } // ... }

// 在 Vuex 中定义全局状态 state: { audioState: { currentAudio: null } }, mutations: { setCurrentAudio(state, payload){ state.audioState.currentAudio = payload; } } // 在音频组件中添加计算属性，获取当前播放的音频文件 computed: { currentAudio(){ return this.$store.state.audioState.currentAudio; } } // 在组件的模板中，添加一个方法来监听 Vuex 状态的变化 watch: { currentAudio(val){ if (val && val !== this.url){ this.url = val; this.playAudio(); } } }