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. numpy.hstack(tup)

    numpy.hstack(tup) Stack arrays in sequence horizontally (column wise). Take a sequence of arrays and ...

  2. 绑定异常pom

    绑定:. <build> <resources> <resource> <directory>src/main/resources</direct ...

  3. Delphi 对象观察器

  4. 008-zabbix监控nginx

    (1)agent端配置 1)nginx编译安装需要加上该选项--with-http_stub_status_module 2)修改nginx配置文件 #vim /usr/local/nginx/con ...

  5. psu补丁

    1.查看命令 su - oracle opatch lspatches su - grid opatch lspatches

  6. Metafile::EmfToWmfBits的使用

    其中涉及到string转换LPCWSTR以及模块绝对路径的调用 #include <iostream> #include <stdio.h> #include <WIND ...

  7. Python 3标准库第四章

    第四章日期和时间-----------------    不同于int.float和str,Python没有包含对应日期和时间的原生类型,不过提供了3个相应的模块,可以采用多种表示来管理日期和时间值. ...

  8. 小小程序员的生产力工具——2017款MacBook pro 13.3（附使用技巧和常用链接）

    新买的2017款 MacBook pro 13.3 九号到了,第一次用苹果笔记本,用了两天基本熟悉了,各种软件也安装的差不多,把一些小技巧分享给大家.先放几张图   使用小常识,希望可以帮到您一:尽量 ...

  9. java——HttpClient 代理模式发送Http Https

    在setProxy()方法中设置代理IP后可以将url中的域名换成这个代理IP. http很简单,但是https这样会报错. 问题:如何使用代理发送https请求? 客户端发送https请求之前会先向 ...

  10. 【leetcode&CN&竞赛】1198.Find Smallest Common Element in All Rows

    题目如下: 给你一个矩阵 mat,其中每一行的元素都已经按 递增 顺序排好了.请你帮忙找出在所有这些行中 最小的公共元素. 如果矩阵中没有这样的公共元素,就请返回 -1. 示例: 输入:mat = [ ...