Nuxt

中asyncData数据的管理Nuxt中asyncData数据的管理需求分析由于nuxt需要针对seo进行优化处理，所以数据基本上要在服务端渲染，必须塞入asyncData。我们一一处理每个axios请求。代码拆分为PromiseAllasyncasyncData({params,store,app,query,error}){letgetLayout=store.dispatch('layout/getLayout',params.category),getJobList=store.dispatch('layout/getJobList',Object.assign(查询,参数));returnnewPromise((resolve,reject)=>{returnPromise.all([getLayout,getJobList]).then(()=>{resolve();}).catch(err=>{error({statusCode:500,message:'Pageexception:'+err});});});}，以上只是一部分，store执行的方法会进入vuex进行管理，我们动态调用它的数据computed:{...mapState('layout',['banner','content','page','active','pageSize','metas','menus','list'])}layout对应的是store目录，因为我们需要安装功能模块来划分store如图：exportconststate=()=>({locales:['en','zh'],locale:'en',menus:[],metas：{}，描述：'',active:'',banner:[],content:"",list:[],page:0,pageSize:10})exportconstmutations={setMetas(state,metas){state.metas=metas}},setMenus(state,menus){state.menus=menus},setActive(state,active){state.active=active},setField(state,obj){const{field,value}=obj状态[字段]=值}}exportconstactions={getLayout({commit},category){returnnewPromise((resolve,reject)=>{this.$request.getFeature({category:category}).then(res=>{让{metas,content,menus,active}=res.data.dataconsole.log(metas)commit('setMetas',metas)commit('setMenus',menus)commit('setActive',active)//首页banner分离letbanner=content[0]content=content.slice(1)commit('setField',{字段：'banner'，值：banner}）commit（'setField'，{field：'content'，值：content}）resolve（）}）.catch（err=>{}）.finally（（）=>{})returnPromise.resolve()})},getJobList({commit},filter){returnnewPromise((resolve,reject)=>{this.$request.getJobList(filter).then(res=>{letlist=res.data.data.listlet{page,pageSize}=res.data.metacommit('setField',{field:'list',value:list})commit('setField',{field:'page',value:page})commit('setField',{field:'pageSize',value:pageSize})resolve()}).catch(err=>{reject(err)})})}}配置头(){return{title:this.metas.title,meta:[{hid:'description',name:'description',content:this.metas.description},{hid:'keyword',name:'keyword',content:this.metas.keyword}]};}