VUE SSR渲染之NuxtJS —— 生命周期 钩子

这里只记录一些常用的钩子，更多的还是去看官网吧。

一、服务端钩子

nuxtServerInit() 通常用于初始化一些东西在状态树中

这里给出了一些基本的使用，该文件为store/index.js

// state
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}

 

middleware 中间件，可使用中间件的地方：

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',
  },

2.layout 布局页面使用

3. 组件中使用

<script>
  export default {
　　data() {
　　　　return {}
　　},
    middleware() {
      console.log("页面级别的middleware")
    }
  }
</script>

asyncData() 读取数据，返回给组件,这里我们可以做一些异步的数据请求，返回给组件。

fetch() 和asyncData类似，只不过返回数据给redux状态树。

validate() 做一些校验业务，返回Boolean值，true为通过，false则跳到错误页面。

具体使用方式在下篇文章！！

二、服务端和客户端

beforeCreate()

created()

这两个钩子可能运行在客户端(CSR)也可能在服务端(SSR)

建一个页面测试一下。。。

<template>
  <h1>登录页</h1>
</template>

<script>
export default {
  beforeCreate() {
    // window是浏览器独有的，服务端不会有
    console.log("beforeCreate", window);
  },
};
</script>

<style>
</style>

访问对应页面，你有几率看到错误信息，没有的话多刷新几次。

三、客户端

客户端的生命周期钩子和vue一致，这里不做过多的介绍。

 　beforeMount()

    mounted()

    beforeUpdate()

    updated()

    beforeDestory()

    destoryed()

    activated()

    deactivated()