本节总览

本节代码提交至：chapter7

效果预览：

singer-detail.png

本节实现点击歌手提交mutation，将歌手数据存储在store中，涉及到整个Vuex技术栈。
本节主要代码开发是singer-detail组件。
singer-detail调用开发的music-list组件：将歌手歌曲数据、背景图片以及歌手姓名传入到music-list组件中。
music-list组件中分为上半部分与下半部分两块，下半部分的歌曲列表再分离成song-list组件。
即总共包含三个组件的开发，还有一些酷炫、美丽的花朵、图片拖拽等的效果。

代码更新

主要更新代码列表如下：

 /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 | 进入/离开 & 列表过渡

官方学习：https://cn.vuejs.org/v2/guide/transitions.html
小结：
1.transition标签包裹
2.进入时：name-enter与name-enter-active
3.离开时：name-leave-to与name-leave-active
4.CSS3-3D转换(translate3d)
关于Vue的动画效果与CSS3动画效果的学习，日后总结一篇文章，贴出地址。

二、Vuex

官方学习：https://vuex.vuejs.org/zh/
小结：
1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2.Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture
3.Vuex 和单纯的全局对象有两点不同:
1️⃣、Vuex 的状态存储是响应式的
2️⃣、你不能直接改变store中的状态。改变 store中的状态的唯一途径就是显式地提交 (commit) mutation。
4.可以通过 store.state.count 来获取状态对象，以及通过store.commit 方法触发状态变更.
5.强调:我们通过提交mutation的方式，而非直接改变store.state.count，是因为我们想要更明确地追踪到状态的变化.
6.mapState辅助函数| 对象展开运算符
7.Getter:从 store中的 state 中派生出一些状态.:详请
8.mapGetters 辅助函数
9.Mutation
1️⃣、接受 state 作为第一个参数
2️⃣、可以向 store.commit传入额外的参数，即 mutation的 载荷（payload）
3️⃣、使用常量替代 Mutation 事件类型（本节使用）
4️⃣、Mutation 必须是同步函数
10.Action
----Action类似于mutation，不同在于：
①、Action 提交的是 mutation，而不是直接变更状态。
②、Action 可以包含任意异步操作。
11.Module
为了解决store 对象可能变得相当臃肿的问题。
……

三、通过jsonp--以singer.id为参数，获取歌手详情数据

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

四、歌手详情数据处理和song类的封装

通过jsonp获取到了歌手详情的数据后，需要对详情数据进行优化，将优化的数据进行存储。
在common/js中新建song.js，开发song类 ，避免代码冗余----小拓展：ES6-Class基本语法

五、music-list组件开发

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

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

那个啥，后面的代码就不分析了，直接github上clone下chapter7分支代码即可，这个歌手详情页真是美的不像话。