Nuxt 生命周期

Nuxt分为客户端和服务端的生命周期

服务端生命周期

服务端生命周期运行完了之后再运行客户端(跟页面没有关系，每个页面都会执行服务端生命周期)

1.nuxtServerInit(nuxt中第一个运行的生命周期)

// 在store(vuex)
export const  state={
    token:'tokennnnnn'
}

export const mutations={
    setToken(state,token){
        state.token=token
    }
}

export const actions={
    nuxtServerInit(store,context){
    // 也是有参数的
	// 参数1:vuex上下文
	// 参数2:nuxt上下文
        console.log('nuxtServerInit');
        store.commit('setToken','abc123')
        // 执行setToken之后再打印
        console.log(store);
    }
}

2.RouteMiddleware(第二个：中间键，路由导航守卫)

2-1 全局
在nuxt.config.js文件中的export default下

  router:{
    // 定义一个名称
    middleware:'auth'
  }

在项目文件中新建一个文件夹middleware中再新建一个对应在配置文件中起的名字(auth)的js文件
项目/middleware/auth.js

// vuex 路由信息 要跳转的页面 传递的参数 请求头 请求接口返回的数据
export default function({store,route,redirect,params,req,res}){
    // 判断是否有token(就是是否登陆了，如果没有就跳转到指定的页面去)
    let token = store.state.token
    if(!token){
        redirect('/list')
    }
    console.log('middleware')
}

2-2 局部
在要使用的页面中js中的export default配置个

 middleware:'auth'

跟全局差不多，就是配置的位置不同，新建。。。。。
也可以在组件内

middleware(){
// 内容 // 这样就不用新建文件了
}

4.validate() 是用来校验url参数符不符合

在页面中使用

validate({params,query}){
	// 可以拿到参数信息
    console.log('validate',params.id);
    // 如果不返回true就会报错，页面就会跳转到404的页面
    return true
}

如果用户将url中的query参数修改或者删除，那么就会，，，，，
在正常的vue项目中会有一层判断，这个参数有没有
在nuxt中就有个validate

return /^\d+$/.test(query.id)

5.asyncData()

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

在components文件中的组件使用不了，fetch就都可

asyncData({store,params}){
  console.log('asyncData');
}

6.fetch

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

如果页面组件设置了 fetch 方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前）。

在components文件中的组件使用不了，fetch就都可

fetch({app,store,params}){
  console.log('fetch');
}

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

beforeCreate

created

客户端生命周期(Vue的生命周期)