實現播放音樂功能

1.在compontents下建立playcontroller.vue

<template>
   <div class="playController">
       <div class="left">
           <img src="https://p1.music.126.net/R-Eg1aZcut8jKYM6UP5fvA==/109951167311919702.jpg" alt="">
           <div class="content">追夢赤子心</div>
           <div class="tips">橫劃劃切換上下手</div>
       </div>
       <div class="right">
           <svg class="icon" aria-hidden="true">  <!--阿里巴巴向量圖示-->
               <use xlink:href="#icon-bofang1"></use><!--阿里巴巴向量圖示-->
           </svg>
           <svg class="icon" aria-hidden="true">  <!--阿里巴巴向量圖示-->
               <use xlink:href="#icon-liebiao1"></use><!--阿里巴巴向量圖示-->
           </svg>
       </div>
   </div>
</template>
​
<script>
   export default {
       name: "playController"
  }
</script>
 

2.在app.vue主元件中引入playController全域性播放元件,在components中註冊,元件名當標籤名使用(掛載)

<template>
​
 <router-view/>
 <playController/>                                                       //使用單元
</template>
<script>
 import playController from "@/components/playController";      // 引入這個單元
 export default{
   components:{
     playController//掛載單元
  }
}
</script>
​
 

3.實現每次進入歌單 播放列表就會把playlist 改為當前歌單的中的一條歌曲進行播放

store/index.js存放模擬資料 和修改資料方法mutations

export default createStore({
 //元件之間共享的資料   15034
 state: {
   playlist:[ //音樂播放列表 要預設有一條播放歌曲
    {
       name: "追夢赤子心",
       id: 355992,
       al:{
         id: 35139,
         name: "追夢痴子心",
         pic: 19061133579343590,
         picUrl: "http://p3.music.126.net/XDncptlBJ4_LN3hLBx-8aw==/19061133579343591.jpg",
         pic_str: "19061133579343591",
      }
    },
  ] ,
   playCurrentIndex:0  // 當前播放歌曲在音樂列表中的下標
},
 getters: {
},
 mutations: {
   setPlaylist(state,value){  //定義一個函式，修改state中的playlist音樂播放器別表資料
     state.playlist =value;
  }
},
 actions: {
},
 modules: {
}
})
 

2. 法①在listView中引入

import store from '@/store/index.js'

3.進入歌單詳情頁面，將歌單中的播放列表傳遞到srore的playlist中去 commit觸發mutation中的函式

musics.playlist = res.data.playlist;
store.commit('setPlaylist',musics.playlist.tracks)

4. 法② playController.vue通過下標獲取歌單資料

<script>
   import {mapState} from 'vuex'
   export default {
       name: "playController",
       //獲取當前播放歌曲的詳細資訊，就是通過下標 拿到資料
       computed:{
           ...mapState['playlist','playCurrentIndex']
      }
  }
</script>

5.把playcontroll拿到playlist並播放