vue字典辅助功能管理下拉列表及过滤实践

Gitee地址https://gitee.com/rayleighvickecn/dictgithub地址https://github.com/rayleighzhao/dict管理下拉列表函数介绍：customOwnKeys管理过滤器使用三个函数：mapDictFilter、mapAsyncDictFilter、mapAsyncDictInit字典数据定义在Vuex@/store/modules/dict.jsimport{customOwnKeys}来自'@/utils'functionmutationFunc(key){returnfunctionmutation(state,val){state[key]=val}}exportdefault{namespaced:true,state(){return{customOwnKeysStatus1:customOwnKeys({'01':'1','09':'9','11':'11','21':'21',//[customOwnKeys.ID]:['01','09','11','21']},/*(a,b)=>字符串(a)>字符串(b)?1:-1*/),status2:{'001'：'状态2-1'，'002'：'状态2-2'，}，asyncStatus3：{'003'：'状态3-3'，'004'：'状态3-4'，},asyncStatus4:{'003':'状态4-3','004':'状态4-4',},asyncStatus5:{'003':'状态5-3','004':'状态5-4',},}},getters:{},变异ns:{setAsyncStatus3:mutationFunc('asyncStatus3'),setAsyncStatus4:mutationFunc('asyncStatus4'),setAsyncStatus5:mutationFunc('asyncStatus5'),},actions:{setAsyncStatus3(context){setTimeout(()=>{context.commit('setAsyncStatus3',{'003':'Status3-33','004':'Status3-44',})},2000)},setAsyncStatus4(context){setTimeout(()=>{上下文。commit('setAsyncStatus4',{'003':'Status4-33','004':'Status4-44',})},2000)},setAsyncStatus5(context){setTimeout(()=>{上下文.commit('setAsyncStatus5',{'003':'Status5-33','004':'Status5-44',})},2000)}},}customOwnKeys用法一：key转为字符串,按Unicode排序customOwnKeysStatus1:customOwnKeys({'01':'一','09':'九','11':'五一','21':'二十一',}),usage2:customOwnKeysStatus1:customOwnKeys({'01':'1','09':'9','11':'11','21':'21',[customOwnKeys.ID]:['01','09','11','21']}),用法三：customOwnKeysStatus1:customOwnKeys({'01':'one','09':'九','11':'11','21':'21',},['01','09','11','21']),用法4：同Array.prototype.sortcustomOwnKeysStatus1:customOwnKeys({'01':'1','09':'9','11':'1','21':'21',},(a,b)=>字符串(a)>字符串(b)?1:-1)、自定义订单下拉列表示例All{{value}}data(){return{customOwnKeysStatus1Value:'',}},computed:{...mapState('dict',['customOwnKeysStatus1']),},mapDictFiltervue2用法{{item.status|status2}过滤器：{...mapDictFilter(['status2'])}vue3用法{{status2(item.status)}}方法：{...mapDictFilter(['status2'])}mapAsyncDictFiltervue2用法{{item.async状态3|asyncStatus3}}方法：{...mapActions('dict',['setAsyncStatus3'])},filters:{...mapDictFilter(['asyncStatus3']),},watch:{...mapAsyncDictFilter(['asyncStatus3'])},created(){this.setAsyncStatus3()},vue3usage{{asyncStatus3(item.asyncStatus3)}}方法：{...mapActions('dict',['setAsyncStatus3'])},watch:{...mapAsyncDictFilter(['asyncStatus3']),},created(){this.setAsyncStatus3()},mapAsyncDictInit回调是一个函数，因为mapAsyncDictFilter是异步获取的,存在先获取数据后不同步字典的问题，所以使用mapAsyncDictInit更安全，数组[{dictName:'asyncStatus4',asyncName:'setAsyncStatus4'}]并发获取字典，以及回调vue2usage{{item.asyncStatus4|asyncStatus4}}vue3usage{{asyncStatus4(item.asyncStatus4)}}js部分没有区别mounted:mapAsyncDictInit([{dictName:'asyncStatus4',asyncName:'setAsyncStatus4'}],function(){constlist=[{id:1,asyncStatus4:'003'},{id:2,asyncStatus4:'004'},{id:3、asyncStatus4:'004'},{id:4,asyncStatus4:'003'},]setTimeout(()=>this.list=list,2000)})mapAsyncDictInit回调是{push,pop}推送函数和[{dictName:'asyncStatus5',asyncName:'setAsyncStatus5'}]并发获取字典数组。push函数得到结果后，运行pop函数。第一个参数是得到的结果。Vue2使用{{item.asyncStatus5|asyncStatus5}}vue3usage{{asyncStatus5(item.asyncStatus5)}}js部分没有区别mounted:mapAsyncDictInit([{dictName:'asyncStatus5',asyncName:'setAsyncStatus5'}],{push(){returnnewPromise(resolve=>setTimeout(()=>resolve([{id:1,asyncStatus5:'003'},{id:2,asyncStatus5:'004'},{id:3,asyncStatus5:'004'},{id:4,asyncStatus5:'003'},]),2000))},pop(data){this.list=data}})customOwnKeys源代码@/utils/index.jsexport函数customOwnKeys(obj,config){returnnewProxy(obj,{ownKeys(){constkeys=obj[customOwnKeys.ID]||[]if(keys.length>0){returnkeys}elseif(config&&Array.isArray(config)){返回配置}elseif(isFunc(config)){returnReflect.ownKeys(obj).sort(config)}else{returnReflect.ownKeys(obj).sort()}}})}customOwnKeys.ID=Symbol.for('customOwnKeys')mapDictFilter、mapAsyncDictFilter、mapAsyncDictInit源码vue2和vue3只是$getObj部分不同@/filters/dict.jsimportstorefrom'@/store'import{isFunc}from'@/utils'const$state=store.stateconst$getters=store.gettersconst$dispatch=store.dispatchconst$dict=dictName=>{if($state.dict&&$state.dict[dictName]){return$state.dict[dictName]}elseif($getters[`dict/${dictName}`]){return$getters[`dict/${dictName}`]}}const$keyName=dictName=>{if($state.dict&&$state.dict[dictName]){return`$store.state.dict.${dictName}`}elseif($getters[`dict/${dictName}`]){return`$store.getters.dict/${dictName}`}}//vue2const$getObj=that=>that.$options.filters//vue3//const$getObj=that=>thatfunctioncommonFilter(dictName){returnfunctionfilter(val){returndictName[val]||值||'未知'}}functioncommonAsyncFilter(key,callback){returnfunctionwatch(dictName){constobj=$getObj(this)obj[key]=commonFilter(dictName)if(isFunc(callback)){callback()}}}functioncommonMap(keyFunc,func){returnfunctionmap(arr){constreturnObj={}arr.forEach(key=>{returnObj[keyFunc(key)]=func(key)})returnreturnObj}}exportconstmapDictFilter=commonMap(key=>key,key=>commonFilter($dict(key)))exportconstmapAsyncDictFilter=commonMap(key=>$keyName(key),key=>commonAsyncFilter(key))exportfunctionmapAsyncDictInit(arr,回调){返回函数init(){constlength=arr.lengthconstpromises=arr.map(({dictName,asyncName})=>newPromise(resolve=>{constobj=$getObj(this)obj[dictName]=commonFilter($dict(dictName))this.$watch($keyName(dictName)),commonAsyncFilter(dictName,resolve))$dispatch(`dict/${asyncName}`)}))if(isFunc(callback)){Promise.all(promises).then(callback.bind(this))}else{const{push=null,pop=null}=回调||{}constpromise=Promise.resolve()if(isFunc(push)){promises.push(promise.then(push.bind(this)))}constresult=Promise.all(promises)if(isFunc(pop)){结果.then(datas=>datas[length]).then(pop.bind(this))}}}}