Vuex的各个模块封装

你的名字 2021-08-13 22:08 326阅读 0赞

## 一、各个模块的作用： ##

*  state 用来数据共享数据存储
 *  mutation 用来注册改变数据状态（同步）
 *  getters 用来对共享数据进行过滤并计数操作
 *  action 解决异步改变共享数据（异步）

## 二、 创建文件： ##

> actions.js

> getters.js

> index.js

> mutations.js

> mutation-types.js

> state.js

## 三、编辑文件 ##

*这里只是拿出自己的项目来做一个例子，只是介绍封装的方法。*

**index.js**

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()] : [] 
    })

**state.js**

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

**mutations.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
    	}
    }
    
    export default mutations

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

**getters.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

**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())
    }

## 小贴士： ##

**默认接口:** `export default`  
**具名接口:** `export`

1、export导出多个对象，export default只能导出一个对象。
    
    2、export导出对象需要用{ }，export default不需要{ }。
    
    3、在其他文件引用export default导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为默认导出对象。
    
    4、导入和导出都可以使用as重新命名，as前为原来的名字，后为定义后的名字。
    举例：
    import * as someIdentifier from "someModule";
    ***************************************
    export { es6 as default } from './someModule';
    // 等同于
    import { es6 } from './someModule';
    export default es6;