歌曲播放頁面的數據vuex管理
阿新 • • 發佈:2018-08-12
一個 return 頁面 imp config flag clas 兩個 歌曲
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.singer2 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.currentIndex8 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‘ 89 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管理