歌曲播放页面的数据vuex管理
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管理的更多相关文章
- Vue总结第六天:Vuex (全局变量管理~多个页面共享数据)
Vue总结第六天:Vuex (全局变量管理~多个页面共享数据) 目录 一.Vuex (全局变量管理~~多个页面共享数据) ✿ 更详细的可以看官网:开始 | Vuex 1.什么是Vuex? 2.核心概念 ...
- 使用vuex管理数据
src/vuex/store.js 组件里面使用引入store.js,注意路径 import store from 'store.js' 然后在使用的组件内data(){}同级放入store 三大常用 ...
- 解决Vuex持久化插件-在F5刷新页面后数据不见的问题
页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...
- django学习-27.admin管理后台里:对列表展示页面的数据展示进行相关优化
目录结构 1.前言 2.完整的操作步骤 2.1.第一步:查看ModelAdmin类和BaseModelAdmin类的源码 2.2.第二步:查看表animal对应的列表展示页面默认的数据展示 2.3.第 ...
- 基于EasyNVR+EasyDSS H5视频直播二次开发实现业务需求:直接使用播放页面
之前的"网页直播.微信直播技术解决方案:EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的easynvr"有介绍一些功能.由于客户需求,我们定制一下功能.给该套方案添 ...
- 基于EasyNVR二次开发实现业务需求:直接集成EasyNVR播放页面到自身项目
EasyNVR着重点是立足于视频能力层,但是自身也是可以作为一个产品使用的.这就更加方便了应用层的使用. 由于业务需求的缘故,无法使用实体项目展示. 案例描述 该业务系统是国内某大型显示屏生产企业内部 ...
- 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
- 详细介绍ASP.NET页面间数据传递的使用方法
源码:http://www.jinhusns.com/Products/Download/?type=xcj 在ASP.NET中,页面间数据传递的方法有很多.下面为大家总结一下,页面间数据传递的方法. ...
- ASP.NET页面间数据传递的方法<转>
ASP.NET页面间数据传递的方法 作者: 灰色的天空2 来源: 博客园 发布时间: 2010-10-28 11:06 阅读: 822 次 推荐: 0 原文链接 [收藏] 摘要:本 ...
随机推荐
- ActiveMQ持久化及测试(转)
转:http://blog.csdn.net/xyw_blog/article/details/9128219 ActiveMQ持久化 消息持久性对于可靠消息传递来说应该是一种比较好的方法,有了消息持 ...
- 【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 ...
- MATLAB 的数据导入与导出
1 数据导入: %% 高层次读取数据. importdata 函数是一个高层次的函数 filename = 'weeklydata.txt'; delimiterIn =' '; %delimiter ...
- MFC坐标转换
1.GetWindowRect是取得窗口在屏幕坐标系下的RECT坐标(包括客户区和非客户区),这样可以得到窗口的大小和相对屏幕左上角(0,0)的位置. 2.GetClientRect取得窗口客户区(不 ...
- React(0.13) 定义一个动态的组件(属性)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- SQL SERVER 2008自动发送邮件(完整版)
这两天都在搞这个东西,从开始的一点不懂,到现在自己可以独立的完成这个功能!在这个过程中,CSDN的好多牛人都给了我很大的帮助,在此表示十二分的感谢!写这篇文章,一是为了巩固一下,二嘛我也很希望我写的这 ...
- Eclipse SQLExplorer插件的安装和使用
from: http://blog.csdn.net/flashlm/archive/2007/06/30/1672836.aspx 插件名称: SQLExplorer 插件分类: SQL Edito ...
- label 赋值 , 隐藏 , 显示
<label name='by_stages_number' id='by_stages_number'></label> document.getElementById(&q ...
- 在C语言中除法运算为什么没有小数部分?
原文链接: http://wenda.tianya.cn/question/4e096f010317a93d 除法运算符" / ",如果是两个整数相除结果为整数如果需要保留小数时 ...
- json解析为泛型对象
一.方法 public <T> T jsonToObjByType(String str, Type type) { try { if (isValidJson(str)) { retur ...