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

歌曲播放页面的数据vuex管理

时间:2018-08-12 17:18:42      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:set   第一个   管理   一个   传递   efault   bsp   play   lag   

1.state.js

 1 import {playMode} from ‘@/common/js/config‘
 2 const state = {
 3   singer:{},
 4   playing:false,
 5   fullScreen:false,
 6   playlist:[],
 7   sequenceList:[],
 8   mode:playMode.sequence,
 9   currentIndex:-1,
10 }
11 
12 export default state

2.getters.js

 1 export const singer = state =>state.singer
 2 export const playing = state => state.playing
 3 export  const fullScreen = state =>state.fullScreen
 4 export const playlist = state => state.playlist
 5 export const sequenctList = state =>state.sequenceList
 6 export const mode = state =>state.mode
 7 export const currentIndex =state=> state.currentIndex
 8 export const currentSong = (state) =>{
 9   return state.playList[state.currentIndex] ||{ }
10 }

3.mutation-types.js

 1 export const SET_SINGER = ‘SET_SINGER‘
 2 
 3 export const SET_PLAYING_STATE = ‘SET_PLAYING_STATE‘
 4 
 5 export const SET_FULL_SCREEN = ‘SET_FULL_SCREEN‘
 6 
 7 export const SET_PLAYLIST = ‘SET_PLAYLIST‘
 8 
 9 export const SET_SEQUENCE_LIST = ‘SET_SEQUENCE_LIST‘
10 
11 export const SET_PLAY_MODE = ‘SET_PLAY_MODE‘
12 
13 export const SET_CURRENT_INDEX = ‘SET_CURRENT_INDEX‘

4.mutations.js

 1 import * as types from ‘./mutation-types‘
 2 const mutations = {
 3   [types.SET_SINGER](state,singer){//mutations接收两个参数,第一个是state另外一个是传递过来的值
 4     state.singer = singer
 5   },
 6   [types.SET_PLAYING_STATE](state,flag){
 7     state.playing = flag
 8   },
 9   [types.SET_FULL_SCREEN](state, flag) {
10     state.fullScreen = flag
11   },
12   [types.SET_PLAYLIST](state, list) {
13     state.playlist = list
14   },
15   [types.SET_SEQUENCE_LIST](state, list) {
16     state.sequenceList = list
17   },
18   [types.SET_PLAY_MODE](state, mode) {
19     state.mode = mode
20   },
21   [types.SET_CURRENT_INDEX](state, index) {
22     state.currentIndex = index
23   },
24 }
25 
26 
27 export default mutations

 

歌曲播放页面的数据vuex管理

标签:set   第一个   管理   一个   传递   efault   bsp   play   lag   

原文地址:https://www.cnblogs.com/yangguoe/p/9463144.html

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