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