1、歌单详情页是推荐页面的二级路由页面

将推荐页面歌单的数据传到歌曲详情页面  利用vuex

1、首先在state下定义一个歌单对象 disc{}

2、在mutaions-types中  定义一个别名

3、在mutations里面创建更改函数

4、在getters里面将该状态与组件映射

4、在recommed推荐主页引入mapMutations

5、在methods中去拓展mapMutations ...mapMutations({自定义函数名：' mutations-types中的别名 '  })  将自定义函数与matutations-types中的函数相映射

6、在对应的事件中调用自定义函数  从而可以修改mutations 此时state中的disc就被修改了

7、在disc组价中通过import mapGetter也可以拿到vuex中的数据

用Vue来实现音乐播放器（四十）：歌单详情页布局以及Vuex实现路由数据通讯的更多相关文章

  1. 用Vue来实现音乐播放器（十四）：歌手数据接口抓取

    第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/j ...

  2. 用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  3. 用Vue来实现音乐播放器（十七）：歌手页右侧快速入口实现

    快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性   通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到l ...

  4. 用Vue来实现音乐播放器（十六）：滚动列表的实现

    滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件     <template> < ...

  5. 用Vue来实现音乐播放器（十五）：处理得到的歌手数据

    之前得到的歌手数据是用forEach遍历添加的  没有顺序性  我们希望得到的数据是title:"热门"的数据在最上面  title为字母的数据按字母从低到高顺序排列 var ho ...

  6. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  7. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  8. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  9. 用Vue来实现音乐播放器（二十三）：音乐列表

    当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列 ...

随机推荐

  1. easyUI解析原理

    easyUI通过parser解析器,对页面中的html元素进行查找, 如果查找到class名以easyui-开头的标签,就调用easyui对应的组件,将该标签封装成easyui的组件

  2. redis之使用场景

    随着数据量的增长,MySQL 已经满足不了大型互联网类应用的需求.因此,Redis 基于内存存储数据,可以极大的提高查询性能,对产品在架构上很好的补充.在某些场景下,可以充分的利用 Redis 的特性 ...

  3. Linux--目录管理与文件管理--02

    ******Linux目录结构与目录管理******* 一.Linux目录结构: 1.目录创建规则:FHS文件系统层次化标准 指定了Linux操作系统的哪些目录是一定要具备的 2.目录的结构 树形结构 ...

  4. centos7下通过LVS的DR模式实现负载均衡访问

    一.两台服务器作为real server ,一台作为director director:172.28.18.69 vip:172.28.18.70 real server1:172.28.18.71 ...

  5. windows 汇编

    int main(){ int a = 1; int c = 2; int b; __asm { MOV EAX, a; MOV EBX, c; ADD EAX, EBX; MOV b, EAX; } ...

  6. python 文件夹压缩

    import os import zipfile def zipDir(dirpath,outFullName): """ 压缩指定文件夹 :param dirpath: ...

  7. 【洛谷P3338】力

    题目大意:求 \[ E_{j}=\sum_{i<j} \frac{q_{i}}{(i-j)^{2}}-\sum_{i>j} \frac{q_{i}}{(i-j)^{2}} \] 题解:可以 ...

  8. 九、爬虫框架之Scrapy

    爬虫框架之Scrapy 一.介绍 二.安装 三.命令行工具 四.项目结构以及爬虫应用简介 五.Spiders 六.Selectors 七.Items 八.Item Pipelin 九. Dowload ...

  9. MySql截取手机号

    IF(IFNULL(phone_number,'')='','',CONCAT(LEFT(phone_number,3),'****',RIGHT(phone_number,4)))  phone_n ...

  10. 安装nginx 以及nginx负载均衡

    a  安装 [root@localhost ~]# yum -y install gcc automake autoconf libtool make yum install gcc gcc-c++ ...