【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()