2022_07_21施工进度

点击 http://test.bandao.ltd 再点击歌单再点击音乐可以播放歌曲，下面的播放暂停按钮可正常使用

主要难点：本地要代理访问网易云的api，线上则不需要自己代理（这里花了两个小时来更正

修复bug：刷新导致404

// vue.config.js
devServer: {
    proxy: {
        '/api': {
            target: 'https://music.163.com',//这里填入你要请求的接口的前缀
            ws: true,//代理websocked
            changeOrigin: true,//虚拟的站点需要更管origin
            secure: true,                   //是否https接口
            pathRewrite: {
                '^/api': ''//重写路径
            }
        }
    }
}

// footerMusic.vue
<!-- 本地使用这个，这里用了代理 -->
<!-- <audio ref="myAudio" :src="`/api/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3`"></audio> -->
<!-- 线上使用这个 -->
<audio ref="myAudio"
    :src="`https://music.163.com/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3`"></audio>  

技术点vuex

// store/index.js
mutations: {
    updateIsBtnShow(state, value) {
      state.isBtnShow = value
    },
    updatePlaylist(state, value) {
      state.playlist = value
    },
    updatePlaylistIndex(state, value) {
      state.playlistIndex = value
    },
  },

// footerMusic.vue
import { mapMutations, mapState } from 'vuex'
computed: {
        ...mapState(['playlist', 'playlistIndex', 'isBtnShow']),
    },
methods: {
        ..mapMutations(['updateIsBtnShow'])
},