Vue SSR 项目 Nuxt.js 框架之《生命周期》

Nuxt生命周期大概分为不两大类：nuxt相关 和 vue相关。我们着重讲一下nuxt相关的生命周期。

nuxt生命周期的钩子函数运行在服务端，大致有五个，运行的先后顺序如下：

# 1. nuxtServerInit：服务器初始化

在store文件夹中创建index.js文件，并写入以下代码：

export const actions = {
    // 服务初始化：一般会初始化一些东西到 store
    nuxtServerInit(store, context) {
        console.log('nuxtServerInit', store, context)
    }
}

重启刷新页面后，在控制台可看到以下输出：

nuxtServerInit {       
  dispatch: [Function: boundDispatch],
  commit: [Function: boundCommit],
  getters: {},
  state: {},
  rootGetters: {},
  rootState: {}
} 

.... 此处省略 

# 2. middleware：中间件运行，有三种

(a) 在nuxt.config.js中配置，如下：

module.exports = {
    router:{
        // 指在运行时，指定运行 middlewrae 文件夹下的 auth.js
        middleware: 'auth'
    }
}

在middlewrae文件夹下创建auth.js并输出一个函数，如下

export default ({store, route, redirect, params,query, req, res})=>{
    // 处理全局守卫业务，根据需要而定
   consle.log('nuxt.config.js middleware');
}

(b) 在布局layouts里配置，如下：
在layouts文件下的布局页面里定义，例如default.vue

export default {
    // 法一：定义在外部即middleware文件夹里
    middleware: 'auth'
    // 法二：定义在内部
    middleware(context){
        consle.log('布局级 middleware');
    }
}

(c) 单个页面中配置
pages文件夹下的任意一个页面

export default {
    middleware(context){
        consle.log('页面级 middleware');
    }
}

综上，顺序依次为：nuxt.config.js -> layouts - > page

# 3. validate：校验参数

页面还没有初始化时会先校验参数

export default{
    validate({params, query}){
        return 校验结果 true/false
    }
}
成功：正常显示页面
失败：跳转404页面

# 4. asyncData：异步处理数据

读取数据，返回给目标组件

export default{
    asyncData(context){
        return {
            test: '返回的数据'
        }
    }
}

这里返回的数据会和当前页面的data进行合并，即用this.test就可访问到返回的数据

# 5. fetch：异步处理数据

读取服务端数据提交给vuex

export default{
    fetch({store}){
        ...
    }
}

具体的应用会在以后的篇幅中详细介绍，敬请期待哟~~