Vue学习必须掌握的封装技巧：音视频元素如何玩转单一职责原则

为何要进行音视频元素的封装

学习Vue时记住这个“单一职责原则”真的很重要！比如音视频，我们只要让它们播放音乐或者视频就行，其他乱七八糟的功能就别加了。这样能让代码更清晰易懂，出错率降低，修起来也容易得多。用Vue来封装音视频，就像玩乐高积木一样，既有趣又方便，省去了很多麻烦，维护起来也轻松愉快！

说白了，封装就是给东西包个外壳。Vue里也是这个道理，难搞的音视频这些玩意儿，咱们都能单独弄成小模块。这样做，程序运行速度快多了，也方便维护编程习惯。

实现音视频的封装

  

    <audio :src="url" ref="audioRef">
  

要在Vue中加音频或视频，首先得做个组件。然后，记得在组件里加上

or

这俩符号就好！接着，把它丢到template属性里并绑定上数据属性，这样就能随心所欲地玩转音视频咯~

比如说在audio组件里设url属性找音频文件的路径；然后用’>’显出来就搞定！想要操作音频元素？加个ref属性，想咋整随你便！

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;
    }
   }
  // ...
}

接下来，咱在这个组件里搞点JavaScript代码，比如让音乐能播能停、能静音啥的。然后用playing、muted这样的数据属性调音量，模板里调用这些方法就能随便操控了。音频处理这事儿，就这么简单搞定！

进一步封装

  

    
    {{ playing ? 'Pause' : 'Play' }}
    {{ muted ? 'Unmute' : 'Mute' }}
  

不只是装饰东西，用它们我们还能玩游戏、聊大天！想听点新花样？那就让Vuex来当中间人。

首先，把audioState这个全局变量存放到Vuex里面；然后给音频部分添个mutation来控制状态；接下来弄个计算属性，用来获取现在正在播的东西；最后，就在模板里搞个按钮，音乐就能响起来！这样一来，处理共享数据就简单多了！

Vuex就是一个牛逼的共享状态工具，用它可以轻松搞定Vue组件之间的数据传输。你看，把每个音频组件和Vuex绑在一起后，代码变得超级干净，维护起来也方便多了，以后要加新功能也简单。这么一搞，不仅省时省力，还能少找bug！

整体来看，把音视频组件包个小壳子，学 Vue app 编程就变得轻而易举了，还能让各组件间更默契地协作~

// 在 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();
    }
  }
}