生命周期存在服务端，服务端与客户端共有，客户端三个阶段的生命周期。

生命周期顺序如下：

服务端的生命周期

• nuxtServerInit，在store文件夹下建立index.js文件。此生命周期会全局运行，无论访问那个vue文件，都会走
  nuxtServerInit 可接收两个参数store，content

export const state = {
  token: "123456",
};
export const mutations = {
  setToken(state, token) {
    state.token = token;
  },
};
export const actions = {
  /**
   *
   * @param {*} store 可获取到vuex上下文的数据
   * @param {*} content 可获取到nuxt上下文的数据
   */
  nuxtServerInit(store, content) {
    store.commit("setToken", "abc123");
    console.log("nuxtServerInit", store);
  },
};

• middleware 中间件，第二个生命周期，也是执行每个vue文件都会运行的

1. 需先在nuxt.config.js中进行配置router，设置的是全局middleware中间件

export default {
  /**
  * 配置router
  * auth 名字可以随意起，需要跟middleware文件夹下的xxx.js名称一致即可
  */
  router: {
    middleware: "auth",
  },
};

2. 项目根目录下建立middleware文件夹，再建auth.js文件

export default function ({ store, route, redirect, params, query, req, res }) {
  // 根据获取到的参数，可以去判断路由跳转到哪个具体页面，或者根据参数去处理下其他逻辑
  console.log("middleware auth");
}

3. 也可以设置局部的中间件，如建立一个list.vue, middleware文件夹下建立一个list.js,调用如下：
   list.vue

<template>
  <div>list 页面</div>
</template>
<script>
export default {
  name: "list",
  middleware: "list",  // 使用局部的中间件
  // 第二种写法如下
  middleware(){
      console.log('middleware list 局部')
  }
};
</script>

list.js

export default function () {
  console.log("middleware list 局部");
}

4. 全局的中间件会先执行，然后再执行局部的中间件

• validate 校验路由参数的，第三个生命周期执行，一般写在vue文件里的，如下：

<template>
  <div>
    首页
    <Tutorial />
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  validate({ params, query }) {
  // 判断路由传参对不对，若是不符合规范，则可让页面跳转到404页面，不至于页面出现空白情况
    console.log("validate");
    return true;
  },
};
</script>

• asyncData 方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据并返回给当前组件

// 注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
 asyncData({ store, params }) {
 // 再此可调用接口，请求数据
    console.log("asyncData");
  },

• fetch 方法的第一个参数是页面组件的上下文对象 context，我们可以用 fetch 方法来获取数据填充应用的状态树。为了让获取过程可以异步，你需要返回一个 Promise，Nuxt.js 会等这个 promise 完成后再渲染组件。

// 警告: 您无法在内部使用this获取组件实例，fetch是在组件初始化之前被调用
fetch({ app, store, params }) {
    console.log("fetch");
 },

服务端与客户端共有的生命周期

接下来是vue中生命周期，比较常用，就不做解释里。

• beforeCreate
• created

客户端的生命周期

• beforeMount() {},
• mounted() {},
• beforeUpdate() {},
• updated() {},
• beforeDestroy() {},
• destroyed() {},

一个vue文件生命周期完整的执行顺序：nuxtServerInit 》middleware 》 validate 》 asyncData 》 fetch 》beforeCreate 》 created 》beforeMount 》mounted 》 beforeUpdate 》 updated 》 beforeDestroy 》 destroyed