nuxt.js的生命周期

2,674 阅读2分钟

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()**