热门搜索 :
考研考公
您的当前位置:首页正文

七、歌手详情页面--Vuex存储歌手数据

来源:东饰资讯网
本节总览

代码更新


主要更新代码列表如下:

 /src/components/singer-detail/singer-detail.vue
 /src/store  //文件夹下包含多个文件
/src/api/singer.js
/src/components/music-list/music-list.vue
/src/base/song-list/song-list.vue
本节代码开发知识点及代码思路:

一、transition | 进入/离开 & 列表过渡
二、Vuex
三、通过jsonp--以singer.id为参数,获取歌手详情数据

api/singer.js中添加getSingerDetail(singerId)方法。
api中的诸多方法都是通过jsonp方式获取数据,不再赘述。

四、歌手详情数据处理和song类的封装
五、music-list组件开发

新建文件/src/components/music-list/music-list.vue

musicl-list布局,在之前也对歌手的song数据进行了封装存储后,我们继续分析需求,我们发现多个页面与歌手详情页面是类似的(头部的大图片与歌曲list区块),于是开发song-list组件(下半部分的歌曲列表),方便各个地方进行使用。

新建文件/src/base/song-list/song-list.vue
……


更新至2019.1.20,待续。。

Top