码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-06-23 20:58:52      阅读:405      评论:0      收藏:0      [点我收藏+]

标签:eth   alt   method   bsp   img   AC   修改   音乐播放   vue   

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实现路由数据通讯

标签:eth   alt   method   bsp   img   AC   修改   音乐播放   vue   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!