1. 程式人生 > >用Vue來實現音樂播放器(四十):歌單詳情頁布局以及Vuex實現路由數據通訊

用Vue來實現音樂播放器(四十):歌單詳情頁布局以及Vuex實現路由數據通訊

二級 font 利用 imp 實現 map color 音樂 image

1、歌單詳情頁是推薦頁面的二級路由頁面

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

將推薦頁面歌單的數據傳到歌曲詳情頁面 利用vuex

1、首先在state下定義一個歌單對象 disc{}

技術分享圖片

2、在mutaions-types中 定義一個別名

技術分享圖片

3、在mutations裏面創建更改函數

技術分享圖片

4、在getters裏面將該狀態與組件映射

技術分享圖片

4、在recommed推薦主頁引入mapMutations

技術分享圖片

5、在methods中去拓展mapMutations ...mapMutations({自定義函數名:‘ mutations-types中的別名 ‘ }) 將自定義函數與matutations-types中的函數相映射

技術分享圖片

6、在對應的事件中調用自定義函數 從而可以修改mutations 此時state中的disc就被修改了

技術分享圖片

7、在disc組價中通過import mapGetter也可以拿到vuex中的數據

技術分享圖片

技術分享圖片

技術分享圖片

用Vue來實現音樂播放器(四十):歌單詳情頁布局以及Vuex實現路由數據通訊