Vue音乐--搜索页面08_点击歌曲

最新推荐文章于 2022-06-07 10:19:21 发布

「已注销」

最新推荐文章于 2022-06-07 10:19:21 发布

阅读量806

点赞数

分类专栏：移动端音乐项目文章标签： vue vuex slice

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/83012759

版权

本文详细介绍了在Vue音乐应用中实现点击搜索结果歌曲的处理过程，包括通过actions触发事件，将歌曲添加到播放列表和歌曲列表，更新播放序列，并在Vuex中保存。同时，针对在操作Vuex状态时出现的错误，提出了使用slice备份数据来避免直接修改state的方法，以确保播放器组件能正确响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

七、点击歌曲li

要点：
- 与排行榜歌曲列表的歌曲li点击对比
  - 是把获取到的所有歌曲列表设置为vuex中的播放列表
- 而搜索结果的歌曲li是把一首歌添加进播放列表，而且不是简单push，而是插入正在播放
- 因此要和排行榜歌曲li一样要操作的mutations是多个，利用到actions，来操作多个mutations

（一）、点击触发actions事件

↓searchSuggest.vue

import {
   mapActions} from 'vuex' //引入点击存入数据方法的vuex

/*****跳转路由，歌手详情页*********/
  selectItem(item){
   
    //判断是歌手，并把歌手数据提取出出来
    if(item.type===TYPE_SINGER){
     
    }else{
   
      //点击是歌曲,修改歌曲列表数据
      this.insertSong(item)
    }
  },

/*******选择歌曲插入歌曲列表数据*************/
    ...mapActions([
      'insertSong',
    ])
  },