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

Posted 2020-12-29 yangguoe

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