Vuex的各个模块封装的实现
一、各个模块的作用：
- state用来数据共享数据存储
- mutation用来注册改变数据状态（同步）
- getters用来对共享数据进行过滤并计数操作
- action解决异步改变共享数据（异步）
二、创建文件：
- actions.js
- getters.js
- index.js
- mutations.js
- mutation-types.js
- state.js
三、编辑文件
这里只是拿出自己的项目来做一个例子，只是介绍封装的方法。
index.js
importVuefrom'vue'
importVuexfrom'vuex'
import*asactionsfrom'./actions'
import*asgettersfrom'./getters'
importstatefrom'./state'
importmutationsfrom'./mutations'
importcreateLoggerfrom'vuex/dist/logger'//vuex调试工具
Vue.use(Vuex)
constdebug=process.env.NODE_ENV!=='prodycution'//开发环境下开启严格模式
exportdefaultnewVuex.Store({
actions,
getters,
state,
mutations,
strict:debug,
plugins:debug?[createLogger()]:[]
})
state.js
import{playMode}from'common/js/config'
import{loadSearch}from'common/js/cache'
conststate={
singer:{},
playing:false,
fullScreen:false,
playlist:[],
sequenceList:[],
mode:playMode.sequence,
currentIndex:-1,
disc:{},
topList:{},
searchHistory:loadSearch()
}
exportdefaultstate
mutations.js
import*astypesfrom'./mutation-types'
constmutations={
[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
}
}
exportdefaultmutations
mutation-types.js
exportconstSET_SINGER='SET_SINGER' exportconstSET_PLAYING_STATE='SET_PLAYING_STATE' exportconstSET_FULL_SCREEN='SET_FULL_SCREEN' exportconstSET_PLAYLIST='SET_PLAYLIST' exportconstSET_SEQUENCE_LIST='SET_SEQUENCE_LIST' exportconstSET_PLAY_MODE='SET_PLAY_MODE' exportconstSET_CURRENT_INDEX='SET_CURRENT_INDEX' exportconstSET_DISC='SET_DISC' exportconstSET_TOP_LIST='SET_TOP_LIST' exportconstSET_SEARCH_HISTORY='SET_SEARCH_HISTORY'
getters.js
exportconstsinger=state=>state.singer
exportconstplaying=state=>state.playing
exportconstfullScreen=state=>state.fullScreen
exportconstplaylist=state=>state.playlist
exportconstsequenceList=state=>state.sequenceList
exportconstmode=state=>state.mode
exportconstcurrentIndex=state=>state.currentIndex
exportconstcurrentSong=(state)=>{
returnstate.playlist[state.currentIndex]||{}
}
exportconstdisc=state=>state.disc
exportconsttopList=state=>state.topList
exportconstsearchHistory=state=>state.searchHistory
actions.js
import*astypesfrom'./mutation-types'
import{playMode}from'common/js/config'
import{shuffle}from'common/js/util'
import{saveSearch,deleteSearch,clearSearch}from'common/js/cache'
functionfindIndex(list,song){
returnlist.findIndex((item)=>{
returnitem.id===song.id
})
}
exportconstselectPlay=function({commit,state},{list,index}){
commit(types.SET_SEQUENCE_LIST,list)
if(state.mode===playMode.random){
letrandomList=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)
}
exportconstrandomPlay=function({commit},{list}){
commit(types.SET_PLAY_MODE,playMode.random)
commit(types.SET_SEQUENCE_LIST,list)
letrandomList=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)
}
exportconstinsertSong=function({commit,state},song){
letplaylist=state.playlist.slice()
letsequenceList=state.sequenceList.slice()
letcurrentIndex=state.currentIndex
//记录当前歌曲
letcurrentSong=playlist[currentIndex]
//查找当前列表中是否有待插入的歌曲并返回其索引
letfpIndex=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)
}
}
letcurrentSIndex=findIndex(sequenceList,currentSong)+1
letfsIndex=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)
}
exportconstsaveSearchHistory=function({commit},query){
commit(types.SET_SEARCH_HISTORY,saveSearch(query))
}
exportconstdeleteSearchHistory=function({commit},query){
commit(types.SET_SEARCH_HISTORY,deleteSearch(query))
}
exportconstclearSeachHistory=function({commit}){
commit(types.SET_SEARCH_HISTORY,clearSearch())
}
小贴士：
默认接口:exportdefault
具名接口:export
1、export导出多个对象，exportdefault只能导出一个对象。
2、export导出对象需要用{}，exportdefault不需要{}。
3、在其他文件引用exportdefault导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为默认导出对象。
4、导入和导出都可以使用as重新命名，as前为原来的名字，后为定义后的名字。
举例：
import*assomeIdentifierfrom"someModule";
***************************************
export{es6asdefault}from'./someModule';
//等同于
import{es6}from'./someModule';
exportdefaultes6;
到此这篇关于Vuex的各个模块封装的实现的文章就介绍到这了,更多相关Vuex模块封装内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！