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. CDH部署StreamSets

    StreamSets是一个大数据采集工具,数据源支持包括结构化和半/非结构化,目标源支持HDFS,HBase,Hive,Kudu,Cloudera Search, ElasticSearch等.它包括 ...

  2. grunt接触

    grunt使用 以下内容均为已经安装好grunt,具体grunt的安装过程不述,可以参考grunt的相关资料. 1.项目初始化grunt 在项目文件夹的根目录下面,打开命令行grunt init,执行 ...

  3. 需求文档(PRD文档)

    https://blog.csdn.net/zhangbijun1230/article/details/79451874

  4. Linux系统性能测试工具（九）——文件系统的读写性能测试工具之iozone

    本文介绍关于Linux系统(适用于centos/ubuntu等)的文件系统的读写性能测试工具-iozone: 参考链接: https://www.cnblogs.com/Dev0ps/p/788938 ...

  5. 使用IL DASM来查看接口内的自动属性

    在我的本地地址中 C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.6.2 Tools\x64下有一个文件  ildas ...

  6. token和sign

    前言 在app开放接口api的设计中,避免不了的就是安全性问题,因为大多数接口涉及到用户的个人信息以及一些敏感的数据,所以对这些接口需要进行身份的认证,那么这就需要用户提供一些信息,比如用户名密码等, ...

  7. multi gpu inference with tfserving or keras

    在tfserving上,目测只能在每个gpu上起docker    https://github.com/tensorflow/serving/issues/311#issuecomment-4801 ...

  8. 清北学堂北京大学吴耀轩神仙讲课day5摘要

    今天讲图论 图是啥?(白纸上的符号?) 对于一个拥有n个顶点的无向连通图,它的边数一定多于n-1条.若从中选择n-1条边,使得无向图仍然连通,则由n个顶点及这 n-1条边(弧)组成的图被称为原无向图的 ...

  9. Java 接口和内部类

    接口的方法默认死public,接口的属性默认为public static final. 为什么要接口,而不是使用抽象类.一个对象只能继承一个类,却可以实现多个接口. clone: Object的浅拷贝 ...

  10. 【HDU5289】Assignment

    题目大意:给定一个长度为 N 的序列,求序列中最大值和最小值相差小于 K 的连续段的个数. 题解: 最大值和最小值相差不超过 K 是一个在值域角度的限制,应考虑采用平衡树或权值...数据结构进行维护. ...