【音乐App】—— Vue-music 项目学习笔记：用户个人中心开发

【音乐App】—— Vue-music 项目学习笔记：用户个人中心开发

前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。

项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。

---

歌曲列表	收藏歌曲

一、用户个人中心开发

       基础功能开发

• 设置路由跳转

1. 在components->user-center目录下：创建user-center.vue
2. router->index.js中配置路由：

   {
      path: '/user',
      component: UserCenter
   }

3. m-header.vue中通过<router-link>实现跳转

   <router-link tp="/user" class="mine" tag="div">
       <i class="icon-mine"></i>
   </router-link>

• 应用Switches组件

1. 引用注册并使用

   <switches @switch="switchItem" :switches="switches" 
             :currentIndex="currentIndex"></switches>

2. 定义data数据绑定

   data() {
      return {
         currentIndex: 0,
         switches: [
            {name: '我喜欢的'},
            {name: '最近听的'}
         ]
     }
   }

3. 定义方法将获得的index赋值给currentIndex

   switchItem(index) {
       this.currentIndex = index
   }

• 返回上一级路由

1. 给按钮添加点击事件

   @click="back"

2. 定义方法通过router.back返回

   back(){
       this.$router.back() //回退到上一级路由
   }

       收藏列表开发

• Vuex数据配置

1. states.js中：添加数据

   favoriteList: []

2. mutation-types.js中：定义事件类型常量

   export const SET_FAVORITE_LIST = 'SE