vuejs业务页面的发布订阅代码设计
.page-index{}平时在用vuejs写业务页面的时候，经常会发现构建页面，初始化数据，校验参数，渲染子页面子路由等等，往往都是用同样的逻辑.所以这里总结一下这种页面的初始化例程，方便后续的页面创建或者优化逻辑。设计原理采用发布-订阅模型初始化子页面，父页面处理全局相关操作。父页面：验证参数和数据的合法性，并发网络请求，引导到全局错误页面，最后触发initReady=true。子页面：订阅initReady事件，成功后初始化子页面。逻辑图代码设计1.vuex状态数据//store.jsimportglobalfrom'./modules/global';importcardsfrom'./modules/cards';exportdefault{namespaced:true,modules:{global,cards,},};//./modules/global.js/**全局数据*/exportdefault{//命名空间隔离namespaced:true,state:{//全局事件——初始化完成，子页面订阅的变化thiseventinitReady:false,//全局错误代码error:null,//全局常量，不可更改constants:Object.freeze({test:1,}),},mutations:{SET_INIT_READY(state,value){state.initReady=价值;},SET_ERROR(state,value){state.error=value;},},actions:{setInitReady({commit},value){commit('SET_INIT_READY',!!value);},setError({commit},value){commit('SET_ERROR',value||null);},},};//./modules/cards.js/**卡片列表相关数据*/exportdefault{//namespaceisolationnamespaced:true,state:{//当前卡片currentCard:{},//卡片列表cardsList:[],},mutations:{SET_CURRENT_CARD(state,value){state.currentCard=value;},SET_CARDS_LIST(state,value){state.cardsList=value;},},actions:{setCurrentCard({commit},value){commit('SET_CURRENT_CARD',value||{});},setCardsList({commit},value){commit('SET_CARDS_LIST',value||[]);},},};2.vuerouter路由定义//routes.js,subApp路由定义constindex=()=>import(/*webpackChunkName:"HcTplSubApp"*/'./views/index.vue');consthome=()=>import(/*webpackChunkName:"HcTplSubApp"*/'./views/home.vue');exportdefault[{path:'/',component:index,meta:{title:'Home',},children:[{path:'',//Homename:'RouteHome',//使用路由名称跳转，有助于代码的可读性component:home,meta:{title:'首页',keepAlive:true,},},],},];3.index父页面
script>import{mapActions,mapState}from'vuex';importErrorPagefrom'@/components/common/ErrorPage';exportdefault{name:'PageIndex',components:{ErrorPage,},data(){返回{//加载微调器加载：空，}；},computed:{...mapState('tpl/global',{initReady:state=>state.initReady,constants:state=>state.constants,error:state=>state.error,}),...mapState('tpl/cards',{car??dsList:state=>state.cardsList,currentCard:state=>state.currentCard,}),},created(){this.initPage();},方法：{...mapActions('tpl/global',['setInitReady','setError',]),...mapActions('tpl/cards',['setCurrentCard','setCardsList',]),/***全局初始化*/asyncinitPage(){this.loading=this.$weui.loading('loading');//验证参数if(!this.validateQuery()){if(this.loading)this.loading.hide();返回;}//所有初始化的异步请求等待Promise.all([this.initCard()]);//验证结果if(!this.validateResult()){if(this.loading)this.loading.hide();返回;}//触发就绪事件this.setInitReady(true);},/***验证参数有效性*/validateQuery(){const{hospitalId=''}=this.$route.query;if(!hospitalId){this.setError({message:'医院ID[hospitalId]不能为空'});返回假；}返回真；},/***验证全局数据，报错或跳转*/validateResult(){//卡片列表数据为空，跳转到第三方链接创建卡片if(this.cardsList.length===0){this.setError({message:'卡片列表不能为空'});返回假；}返回真；},/***获取卡片列表*/asyncinitCard(){//使用卡片列表插件读取卡片列表const{car??d,cards}=等待这个。$Card.init();this.setCurrentCard(卡片);this.setCardsList(卡片);//校准url里的healthCardId参数const{query}=this.$route;如果(card.healthCardId&&query.healthCardId!==card.healthCardId){awaitthis.$router.replace({query:{...query,healthCardId:card.healthCardId,ecardNo:card.ecardNo,},});}},},};
.page-index{}4.home子页面pagehome 