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

state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state

Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件

Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations

注意:我们也可以在组件中直接commit一个mutations

Mutations:是唯一可以修改State的途径  其他任何方式修改都是不被允许的 Vuex这样做的目的是为了让state的修改是可以预测的  当state被修改之后  又可以映射到组件上  形成一个闭环

使用vuex之前我们通常会在src文件夹下新建一个store文件夹

新建state.js   mutation-type.js   mutations.js   getter.js   index.js   action.js

在state.js中 我们设置组件中的数据

在mutations-types.js中 我们导出修改数据对应的方法名

在mutations.js中  我们要写出详细的修改数据的方法

根据上述方法

在修改数据并且提交数据之后   我们可以在别的组件中获取该数据  从而实现不同组件间的数据共享   那么如何来获取到数据呢??

获取数据  获取的是getter.js中的数据

z最后最重要的是在store文件夹下的index.js中初始化vuex

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

时间: 2024-10-31 03:10:56

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

用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

swift版QQ音乐播放器(二)

一 完善部分的QQ音乐效果图 二 需要完善点 1 歌曲的切换和暂停播放 2 歌曲当前播放时间和歌曲总时间的更新 3 进度条的处理 4 歌手头像处理 5 头像动画效果 6 歌词的进度显示 8 完善细节 三 添加歌曲展示页面中的动画效果 1 代码书写位置 : 由于展示歌词的控制器的UITableViewController,那么我们可以使用代理方法.当用户拖动tableView的时候,会调用一个方法,在该方法中实现动画效果 2 思路 : 通过拿到第一个cell和最后一个cell来计算中间cell的索

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

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

如何写一个正经的Android音乐播放器 二

这一篇讲如何 与音乐播放Service交互 稍有经验的同学都知道,将长时间的操作放在Service中进行,如何做到界面和音乐播放Service的有效沟通呢,在这一章中给出我的答案,同样希望大神们给出指点. 希望你阅读(自行翻墙): Service的API Guide:http://developer.android.com/guide/components/services.html Service的API Guide中的有关bound service中的部分: http://developer

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

1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 3.在mutations里面创建更改函数 4.在getters里面将该状态与组件映射 4.在recommed推荐主页引入mapMutations 5.在methods中去拓展mapMutations ...mapMutations({自定义函数名:' mutations-types中的别名 '