首页 > 其他 > 详细

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

时间:2018-06-23 20:22:14      阅读:365      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!