1.state.js文件
import { playMode } from 'common/js/config'
import { loadSearch, loadPlay, loadFavorite } from 'common/js/cache'
const state = {
singer: {},
playing: false,
fullScreen: false,
playList: [],
sequenceList: [],
mode: playMode.sequence,
currentIndex: -1,
disc: [],
topList: [],
searchHistory: loadSearch(),
playHistory: loadPlay(),
favoriteList: loadFavorite()
}
export default state
2.getter.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 sequenceList = state => state.sequenceList
export const mode = state => state.mode
export const currentIndex = state => state.currentIndex
export const currentSong = (state) => {
return state.playList[state.currentIndex] || {}
}
export const disc = state => state.disc
export const topList = state => state.topList
export const searchHistory = state => state.searchHistory
export const playHistory = state => state.playHistory
export const favoriteList = state => state.favoriteList
在vue文件中使用时
import {mapGetters} from 'vuex'
computed:{
...mapGetters([
'playHistory'//这个值在页面中直接作为变量使用,用this可以访问到
])
},
3.mutaion
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'
export const SET_DISC = 'SET_DISC'
export const SET_TOP_LIST = 'SET_TOP_LIST'
export const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY'
export const SET_PLAY_HISTORY = 'SET_PLAY_HISTORY'
export const SET_FAVORITE_LIST = 'SET_FAVORITE_LIST'
mutation.js文件
import * as types from './mutation-types'
const mutations = {
[types.SET_SINGER](state, singer) {
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
},
[types.SET_DISC](state, disc) {
state.disc = disc
},
[types.SET_TOP_LIST](state, topList) {
state.topList = topList
},
[types.SET_SEARCH_HISTORY](state, history) {
state.searchHistory = history
},
[types.SET_PLAY_HISTORY](state, history) {
state.playHistory = history
},
[types.SET_FAVORITE_LIST](state, list) {
state.favoriteList = list
},
}
export default mutations
在vue文件中使用时
import { mapMutations } from 'vuex'
methods: {
...mapMutations({
setSinger:'SET_SINGER'//此时的setSinger可以作为方法直接使用,用this可以访问到
})
}
actions.js文件
import * as types from './mutation-types'
import { playMode } from 'common/js/config'
import { shuffle } from 'common/js/util'
import { saveSearch, deleteSearch, clearSearch, savePlay, saveFavorite, deleteFavorite } from 'common/js/cache'
function findIndex(list, song) {
return list.findIndex((item) => {
return item.id === song.id
})
}
export const selectPlay = function({ commit, state }, { list, index }) {
commit(types.SET_SEQUENCE_LIST, list)
if (state.mode === playMode.random) {
let randomList = shuffle(list)
commit(types.SET_PLAYLIST, randomList)
index = findIndex(randomList, list[index])
} else {
commit(types.SET_PLAYLIST, list)
}
commit(types.SET_CURRENT_INDEX, index)
commit(types.SET_FULL_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}