Nuxt 中对于 asyncData 数据的治理
需要剖析
因为 nuxt 咱们要对其进行 seo 优化和解决，所以数据根本都要在服务器端渲染实现，也必然都须要塞入到 asyncData 中，咱们针对一一的 axios 申请进行解决
代码拆分为 Promise All
async asyncData({params, store, app, query, error}) {let getLayout = store.dispatch('layout/getLayout', params.category),
getJobList = store.dispatch('layout/getJobList', Object.assign(query, params));
return new Promise((resolve, reject) => {return Promise.all([getLayout, getJobList])
.then(() => {resolve();
})
.catch(err => {error({ statusCode: 500, message: 'Page exception :' + err});
});
});
},
以上只是一部分，store 执行的办法都将进入到 vuex 中进行治理，咱们对其数据进行动静调用
computed: {...mapState('layout', ['banner', 'content', 'page', 'active', 'pageSize', 'metas', 'menus', 'list'])
}
layout 对应的为 store 目录，因为咱们须要装置功能模块将 store 进行划分
如图：
export const state = () => ({locales: ['en', 'zh'],
locale: 'en',
menus: [],
metas: {},
description: '',
active: '',
banner: [],
content: "",
list: [],
page: 0,
pageSize: 10
})
export const mutations = {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
state[field] = value
}
}
export const actions = {getLayout({commit}, category) {return new Promise((resolve, reject) => {this.$request.getFeature({category: category}).then(res => {let { metas, content, menus, active} = res.data.data
console.log(metas)
commit('setMetas', metas)
commit('setMenus', menus)
commit('setActive', active)
// 首部 banner 拆散
let banner = content[0]
content = content.slice(1)
commit('setField', {field: 'banner', value: banner})
commit('setField', {field: 'content', value: content})
resolve()}).catch(err => {}).finally(() => {})
return Promise.resolve()})
},
getJobList({commit}, filter) {return new Promise((resolve, reject) => {this.$request.getJobList(filter).then(res => {
let list = res.data.data.list
let {page, pageSize} = res.data.meta
commit('setField', {field: 'list', value: list})
commit('setField', {field: 'page', value: page})
commit('setField', {field: 'pageSize', value: pageSize})
resolve()}).catch(err => {reject(err)
})
})
}
}
配置 head
head() {
return {
title: this.metas.title,
meta: [{ hid: 'description', name: 'description', content: this.metas.description},
{hid: 'keyword', name: 'keyword', content: this.metas.keyword}
]
};
}