用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯

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中的数据

原文地址:https://www.cnblogs.com/cmy1996/p/9218354.html

时间: 2024-11-01 09:20:49

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

VUE项目实现音乐播放器(四)------- 设计播放进度条 + 播放控制按钮

2020.3.31 9:18 好的,早上好各位,今天我们来进行一个很炫酷的页面开发——播放器控制页面( src\components\Play.vue ),如下图: 我们可以看到,该页面有很多元素组成,歌曲的封面.左上角的页面隐藏按钮,中间的播放进度条.歌词栏.下方的播放控制按钮.右下角的显示播放列表按钮,这些元素完美的结合在一起,整个页面有没有一种很高大上的感觉!好了,让我们来亲自动手实现它吧! 1. 歌曲封面&隐藏按钮 首先通过 getters 获取到歌曲的封面: computed: { i

用Vue来实现音乐播放器(十四):歌手数据接口抓取

第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/js/jsonp.js' import {commonParams,options} from './config.js' export function getSingerList() { const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg' cons

用Vue来实现音乐播放器(十六):滚动列表的实现

滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件   <template> <!-- 当父组件传递给子组件的数据发生变化的时候 scroll可以监听到此时高度会发生变化 --> <!-- 子组件这里的:data和props里面的data相对于 --> <!-- 父传子的时候 data是对应的props里面的值 --> <scroll class=&quo

如何写一个正经的音乐播放器 四 意外情况

四,意外情况的控制. 在音频播放时候,容易遇到一些意外情况,这时候,我们就要处理这些意外情况,这时候,我们需要针对不同的意外情况进行处理.大概可以分成两种情况. 1,失去audio_focus的控制. 造成我们的播放器失去焦点的情况很多,主要是其他声音请求了焦点,例如说,其他音乐播放器开始播放音乐,突然来电,短息等. 以上的焦点失去,都可以用AudioManager.OnAudioFocusChangeListener中的回调来处理.先取得AudioManager AudioManager au

用Vue来实现音乐播放器(三十八):歌词滚动列表的问题

1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是因为它内部有个计时器 //每次currentSong改变的时候都会重新new一个新的lyric-parser出来, //但是我们之前的对象并没有做清理操作 也就是说我们之前对象还是有计时器在里面 //所以歌词会来回闪动 解决办法: 在切换歌曲之前 即getLyric()之前 重新去getLyric(

用Vue来实现音乐播放器(八):自动轮播图啊

slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //要注意slot插槽里面的数据要先渲染出来 <slot> </slot> </div> <div class="dots&q

用Vue来实现音乐播放器(九):歌单数据接口分析

z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本不能够修改请求头的  所以我们就考虑用axios  但是axios又不能进行跨域  那么我们要怎么拿到qq音乐的服务器的数据呢??其实是有办法解决的:我们可以进行后端接口代理  那么什么是后端代理呢?? 如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因

用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置

state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations 注意:我们也可以在组件中直接commit一个mutations Mutations:是唯一可以修改State的途径  其他

SE Springer小组之《Spring音乐播放器》可行性研究报告三、四

3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之后开发“Spring音乐播放器”提供一定的参考. 3.1处理流程和数据流程 说明现有系统的基本的处理流程和数据流程.此流程可用图表即流程图的形式表示,并加以叙述. 图2 基本处理流程图 用户启动M音乐后,可以选择在网络音乐库中查找歌曲并下载,也可以从本地音乐库中查找想听的歌曲,然后进行播放.本地音乐