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. .关于oracle中varchar2的最大长度

    关于 varchar2 的最大长度varchar2有两个最大长度:一个是在字段类型4000:一个是在PL/SQL中变量类型32767.这是一个比较容易出错的地方.因为在函数中可以声明长度超过4000的 ...

  2. C/C++ 零碎知识点

    传递参数的一般指导原则: 对于使用传递的值而不做修改的函数: 如果数据对象很小,比如内置类型或者小型结构,按值传递. 如果数据对象是数组,只能使用指针,并将指针生命为指向const的指针. 如果数据对 ...

  3. jquery 保留两位小数

    jquery 通过 toFixed 保留两位小数 <script> var num = 12.21654; console.log(num.toFixed(2)) </script& ...

  4. 上传图片，正在加载，loading

    https://blog.csdn.net/yansong_8686/article/details/50361573

  5. DevExpress WPF v19.1：Data Grid/Tree List等控件功能增强

    行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPF v19.1中新增的一些控件及部 ...

  6. ZROI 19.08.04模拟赛

    传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. "这应该是正睿OI历史上第一次差评破百的比赛." "这说明来正睿集训的人越来越多了." &qu ...

  7. xz 解压缩命令,老是忘记

    .tar.xz的解压命令 $ xz -d ***.tar.xz $ tar -xvf ***.tar 或者 $ tar xvJf ***.tar.xz

  8. git shell 右键启动注册表

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\Background\shell\Git Bash Here] ): ...

  9. canvas 计算文字宽度（常用于文字换行）

    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font= ...

  10. 在UIScrollView、UICollectionView和UITableView中添加UIRefreshControl实现下拉刷新

    Apple在iOS 6中添加了UIRefreshControl,但只能在UITableViewController中使用,不能在UIScrollView和UICollectionView中使用. 从i ...