nuxt的生命周期分为客户端生命周期,服务端生命周期
1、服务端的生命周期
执行顺序为:
1-1:nuxtServerlnit(store,context){}
类似于vue.js中的main.js。可以在这个生命周期中获取token,并存储。
// state
/**参数解析:
store : vuex上下文
context : nuxt上下文
**、
export function state() {
return {
bNav: false,
bLoading: false
}
}
// mutations
export const mutations = {
M_UPDATE_NAV(state, payload) {
state.bNav = payload
},
M_UPDATE_LOADING(state, payload) {
state.bLoading = payload;
}
}
// actions
export const actions = {
nuxtServerInit(store, context) {
// 初始化东西到状态树
}
}
// getters
export const getters = {
getNav(state) {
return state.bNav ? '显示' : '隐藏'
}
}
export default {namespaced: true, state, mutations, actions, getters}
1-2:Moddleware({store,route,redirect,params,query,req,res}){}
类似于vue.js中的导航守卫,可以是全局的,路由的,组件的。可以在这个生命周期中进行用户是否登录判断, 1.nuxt.config.js中配置middleware 使用方法: 在middleware文件夹下建一个js文件,名称自定义 我们这里建一个auth.js内容随便写
export default({store, route, redirect, params, query, req, res}) => {
// 全局守卫业务
console.log('middleware nuxt.config.js')
}
然后再nuxt.config.js中配置
router: {
middleware: 'auth',
},
layout 布局页面使用
组件中使用
<script>
export default {
data() {
return {}
},
middleware() {
console.log("页面级别的middleware")
}
}
</script>
1-3 asyncData()
读取数据,返回给组件,这里我们可以做一些异步的数据请求,返回给组件。限于页面组件(pages)中使用个,components中不能使用每次加载之前被调用。一般在这个函数中发送请求
1-4 fetch()
和asyncData类似,只不过返回数据给redux状态树。可以在页面、组件中都能使用
1-5 validate()
做一些校验业务,返回Boolean值,true为通过,false则跳到错误页面。
2、服务端和客户端公用个的生命周期 (el还没有被渲染)
beforeCreate()
created()
3、客户端的生命周期 客户端的生命周期钩子和vue一致,这里不做过多的介绍。
**beforeMount()**
**mounted()**
**beforeUpdate()**
**updated()**
**beforeDestory()**
**destroyed()**
**activated()**
**deactivated()**