1.state.js

 import {playMode} from '@/common/js/config'
const state = {
singer:{},
playing:false,
fullScreen:false,
playlist:[],
sequenceList:[],
mode:playMode.sequence,
currentIndex:-1,
} export default state

2.getters.js

 export const singer = state =>state.singer
export const playing = state => state.playing
export const fullScreen = state =>state.fullScreen
export const playlist = state => state.playlist
export const sequenctList = state =>state.sequenceList
export const mode = state =>state.mode
export const currentIndex =state=> state.currentIndex
export const currentSong = (state) =>{
return state.playList[state.currentIndex] ||{ }
}

3.mutation-types.js

 export const SET_SINGER = 'SET_SINGER'

 export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'

 export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'

 export const SET_PLAYLIST = 'SET_PLAYLIST'

 export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST'

 export const SET_PLAY_MODE = 'SET_PLAY_MODE'

 export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'

4.mutations.js

 import * as types from './mutation-types'
const mutations = {
[types.SET_SINGER](state,singer){//mutations接收两个参数,第一个是state另外一个是传递过来的值
state.singer = singer
},
[types.SET_PLAYING_STATE](state,flag){
state.playing = flag
},
[types.SET_FULL_SCREEN](state, flag) {
state.fullScreen = flag
},
[types.SET_PLAYLIST](state, list) {
state.playlist = list
},
[types.SET_SEQUENCE_LIST](state, list) {
state.sequenceList = list
},
[types.SET_PLAY_MODE](state, mode) {
state.mode = mode
},
[types.SET_CURRENT_INDEX](state, index) {
state.currentIndex = index
},
} export default mutations

歌曲播放页面的数据vuex管理的更多相关文章

  1. Vue总结第六天:Vuex (全局变量管理~多个页面共享数据)

    Vue总结第六天:Vuex (全局变量管理~多个页面共享数据) 目录 一.Vuex (全局变量管理~~多个页面共享数据) ✿ 更详细的可以看官网:开始 | Vuex 1.什么是Vuex? 2.核心概念 ...

  2. 使用vuex管理数据

    src/vuex/store.js 组件里面使用引入store.js,注意路径 import store from 'store.js' 然后在使用的组件内data(){}同级放入store 三大常用 ...

  3. 解决Vuex持久化插件-在F5刷新页面后数据不见的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...

  4. django学习-27.admin管理后台里:对列表展示页面的数据展示进行相关优化

    目录结构 1.前言 2.完整的操作步骤 2.1.第一步:查看ModelAdmin类和BaseModelAdmin类的源码 2.2.第二步:查看表animal对应的列表展示页面默认的数据展示 2.3.第 ...

  5. 基于EasyNVR+EasyDSS H5视频直播二次开发实现业务需求:直接使用播放页面

    之前的"网页直播.微信直播技术解决方案:EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的easynvr"有介绍一些功能.由于客户需求,我们定制一下功能.给该套方案添 ...

  6. 基于EasyNVR二次开发实现业务需求:直接集成EasyNVR播放页面到自身项目

    EasyNVR着重点是立足于视频能力层,但是自身也是可以作为一个产品使用的.这就更加方便了应用层的使用. 由于业务需求的缘故,无法使用实体项目展示. 案例描述 该业务系统是国内某大型显示屏生产企业内部 ...

  7. 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案

    我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...

  8. 详细介绍ASP.NET页面间数据传递的使用方法

    源码:http://www.jinhusns.com/Products/Download/?type=xcj 在ASP.NET中,页面间数据传递的方法有很多.下面为大家总结一下,页面间数据传递的方法. ...

  9. ASP.NET页面间数据传递的方法<转>

    ASP.NET页面间数据传递的方法 作者: 灰色的天空2  来源: 博客园  发布时间: 2010-10-28 11:06  阅读: 822 次  推荐: 0   原文链接   [收藏]   摘要:本 ...

随机推荐

  1. ActiveMQ持久化及测试(转)

    转:http://blog.csdn.net/xyw_blog/article/details/9128219 ActiveMQ持久化 消息持久性对于可靠消息传递来说应该是一种比较好的方法,有了消息持 ...

  2. 【RS】List-wise learning to rank with matrix factorization for collaborative filtering - 结合列表启发排序和矩阵分解的协同过滤

    [论文标题]List-wise learning to rank with matrix factorization for collaborative filtering   (RecSys '10 ...

  3. MATLAB 的数据导入与导出

    1 数据导入: %% 高层次读取数据. importdata 函数是一个高层次的函数 filename = 'weeklydata.txt'; delimiterIn =' '; %delimiter ...

  4. MFC坐标转换

    1.GetWindowRect是取得窗口在屏幕坐标系下的RECT坐标(包括客户区和非客户区),这样可以得到窗口的大小和相对屏幕左上角(0,0)的位置. 2.GetClientRect取得窗口客户区(不 ...

  5. React(0.13) 定义一个动态的组件(属性)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. SQL SERVER 2008自动发送邮件(完整版)

    这两天都在搞这个东西,从开始的一点不懂,到现在自己可以独立的完成这个功能!在这个过程中,CSDN的好多牛人都给了我很大的帮助,在此表示十二分的感谢!写这篇文章,一是为了巩固一下,二嘛我也很希望我写的这 ...

  7. Eclipse SQLExplorer插件的安装和使用

    from: http://blog.csdn.net/flashlm/archive/2007/06/30/1672836.aspx 插件名称: SQLExplorer 插件分类: SQL Edito ...

  8. label 赋值 , 隐藏 , 显示

    <label name='by_stages_number' id='by_stages_number'></label> document.getElementById(&q ...

  9. 在C语言中除法运算为什么没有小数部分?

    原文链接: http://wenda.tianya.cn/question/4e096f010317a93d 除法运算符" / ",如果是两个整数相除结果为整数如果需要保留小数时 ...

  10. json解析为泛型对象

    一.方法 public <T> T jsonToObjByType(String str, Type type) { try { if (isValidJson(str)) { retur ...