星之码-前端开发框架vue系列教程--Vuex的各个模块封装

import Vue from 'vue'

import Vuex from 'vuex'

import * as actions from './actions'

import * as getters from './getters'

import state from './state'

import mutations from './mutations'

import createLogger from 'vuex/dist/logger' // vuex调试工具


Vue.use(Vuex)


const debug = process.env.NODE_ENV !== 'prodycution' // 开发环境下开启严格模式


export default new Vuex.Store({

actions,

getters,

state,

mutations,

strict: debug,

plugins: debug ? [createLogger()] : [] 

})

import {playMode} from 'common/js/config'

import {loadSearch} from 'common/js/cache'


const state = {

singer: {},

playing: false,

fullScreen: false,

playlist: [],

sequenceList: [],

mode: playMode.sequence,

currentIndex: -1,

disc: {},

topList: {},

searchHistory: loadSearch()

}


export default state

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

}

}


export default mutations

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 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



actions.js


import * as types from './mutation-types'

import {playMode} from 'common/js/config'

import {shuffle} from 'common/js/util'

import {saveSearch, deleteSearch, clearSearch} 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)

}


export const randomPlay = function({commit}, {list}) {

commit(types.SET_PLAY_MODE, playMode.random)

commit(types.SET_SEQUENCE_LIST, list)

let randomList = shuffle(list)

commit(types.SET_PLAYLIST, randomList)

commit(types.SET_CURRENT_INDEX, 0)

commit(types.SET_FULL_SCREEN, true)

commit(types.SET_PLAYING_STATE, true)

}


export const insertSong = function({commit, state}, song) {

let playlist = state.playlist.slice()

let sequenceList = state.sequenceList.slice()

let currentIndex = state.currentIndex

// 记录当前歌曲

let currentSong = playlist[currentIndex]


// 查找当前列表中是否有待插入的歌曲并返回其索引

let fpIndex = findIndex(playlist, song)

// 因为是插入歌曲，所以索引要+1

currentIndex++

// 插入这首歌到当前索引位置

playlist.splice(currentIndex, 0, song)

// 如果已经包含这首歌

if (fpIndex > -1) {

// 如果当前插入的序号大于列表中的序号

if (currentIndex > fpIndex) {

playlist.splice(fpIndex, 1)

currentIndex--

} else {

playlist.splice(fpIndex + 1, 1)

}

}


let currentSIndex = findIndex(sequenceList, currentSong) + 1


let fsIndex = findIndex(sequenceList, song)


sequenceList.splice(currentSIndex, 0, song)


if (fsIndex > -1) {

if (currentSIndex > fsIndex) {

sequenceList.splice(fsIndex, 1)

} else {

sequenceList.splice(fsIndex + 1, 1)

}

}


commit(types.SET_PLAYLIST, playlist)

commit(types.SET_SEQUENCE_LIST, sequenceList)

commit(types.SET_CURRENT_INDEX, currentIndex)

commit(types.SET_FULL_SCREEN, true)

commit(types.SET_PLAYING_STATE, true)

}


export const saveSearchHistory = function({commit}, query) {

commit(types.SET_SEARCH_HISTORY, saveSearch(query))

}


export const deleteSearchHistory = function({commit}, query) {

commit(types.SET_SEARCH_HISTORY, deleteSearch(query))

}


export const clearSeachHistory = function({commit}) {

commit(types.SET_SEARCH_HISTORY, clearSearch())

}