【WEB】Vue2.0音乐APP实战中的知识点总结（三）

一.效果展示

二.知识点总结

1.从歌手界面跳转到歌手详情界面：

首先配置路由：

{
path:'/singer',
component:Singer,
children:[
{
path:':id',
component:SingerDetail
}
]
},

之后，在singer.vue中挂载子路由

<router-view></router-view>

由于需求是点击列表进行跳转，因此在列表所在的组件中添加对列表的点击事件

<li @click="selectItem(item)" ></ li >
selectItem(item) {
this.$emit('select', item)
},

注：由于list.vue是基础组件，因此不会构建业务逻辑，只负责把事件派发出去即可。

在singer中监听实例

<listview @select="selectSinger" :data="singers"></listview>

实现：

selectSinger(singer){
this.$router.push({
path:`/singer/${singer.id}`
})
this.setSinger(singer)
},

2.transform标签

转场动画：在singer.vue中

<transition name="slide">
<music-list :songs="songs" :title="title" :bg-image="bgImage">
</music-list>
</transition>

.slide-enter-active, .slide-leave-active
transition:all 0.3s
.slide-enter, .slide-leave-to
transform:translate3d(100%,0,0)

3.VueX

在跳转的过程中，需要像详情页传入歌手的信息。这就需要使用Vuex, 也是本节的重点。

Vuex是一个专为Vue.js应用程序开发的状态模式。它采用集中式存储管理应用的所有组件的状态，并以规则保证状态以一种可预测的方式发生变化。



state.js

const state={
singer:{}
}

export default state

mutation-type.js

export const SET_SINGER = 'SET_SINGER'

mutation.js

import * as types from './mutation-type'

const matutaions = {
[types.SET_SINGER] (state,singer){
state.singer=singer
}
}

export default matutaions

getters.js

export const singer=state => state.singer

index.js

import Vuex from "vuex"
import Vue from 'vue'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug=process.env.NODE_ENV !=='production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict:debug,
plugins:debug?[createLogger()]:[]
})

action.js//异步操作，或对mutations进行封装

在main.js中

import store from './store'
new Vue({
el: '#app',
render:h=>h(App),
store,
router

})

以上，VUEX配置完毕

在singer.vue中，利用VUEX提供的语法糖，更加方便。

import {mapMutations} from 'vuex'

在methods中

...mapMutations({
setSinger:'SET_SINGER'//对象映射
}),

selectSinger(singer){
this.$router.push({
path:`/singer/${singer.id}`
})
this.setSinger(singer)//传入singer，实现对与singer的提交
},

在singer-detail中

import {mapGetters} from 'vuex'

export default{

computed:{

...mapGetters([
'singer'//拿到sing
])
},

调用：this.singer

4.回退

this.$router.back()