生命进程

红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端引用 www.jianshu.com/p/840169ba9…

1.红框、黄框内的周期都不存在Window对象

2.nuxtServerInit

vuex===状态树

如果在状态树中指定了 nuxtServerInit 方法，Nuxt.js 调用它的时候会将页面的上下文对象作为第 2 个参数传给它（服务端调用时才会酱紫哟）。当我们想将服务端的一些数据传到客户端时，这个方法是灰常好用的。

举个例子，假设我们服务端的会话状态树里可以通过 req.session.user 来访问当前登录的用户。将该登录用户信息传给客户端的状态树，我们只需更新 store/index.js 如下：

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}

3.middleware

1 layout
2 nuxt.config.js

3.校验参数

如果校验失败，则自动跳转到错误页面

<script>
export default {
  validate({ params, query }) {
    return /^d+$/.test(params.id) // must be number
  }
}
</script>

4. fetch和asyncData

fetch方法用于渲染页面（页面组件加载前被调用【服务端或切换至目标路由之前】）前填充应用的状态树（store）数据,与asyncData方法类似，不同的是它不会设置组件的数据。

第一个参数是页面组件的上下文对象context

为了让获取过程可以异步，需要返回一个promise，Nuxt.js会等这个promise完成后再渲染组件。

  <template>
      <h1> {{ $store.state.stars }}</h1>
  </template>
  <script>
    fetch({ store, params }) {
      return axios.get('http://my-api/stara')
      .then((res) => {
          store.commit('setStars', res.data)
       })
    }
    // 或者用async/await
    async fetch({ store, params }) {
      const { data } = axios.get('http://my-api/stara')
      store.commit('setStars', data)
    }
  </script>

fetch中调用异步获取数据并操作store，推荐使用store.dispatxh

<script>
   async fetch({ store, params }) {
      await store.dispatch('GET_STARS')
   }
<script>

// store/index.js
export const actions = {
  async GET_STARS({ commit }) {
     const { data } = await axios,get('http://my-api/stars')
     commit('SET_STARA', data)
  }
}

asyncData此方法在加载（渲染）组件（页面组件，即pages文件夹下的文件，不包含components下的）之前在服务端或路由更新之前被调用，即可以进行异步获取数据并返回当前组件。

第一个参数为当前页面的上下文

 export default {
    data () {
      return {
         project: 'default'
      }
    },
    asyncData(context) {
        // asyncData方法是在组件初始化前被调用的
       //所以该方法没有办法通过this来引用组件的实例对象
    }
 }

nuxt的生命周期