vuex使用流程_使用 Nuxt.js实现SSR服务器端渲染之页面渲染流程详解

7b5fce9f3e62c53529aeb66404f77902.png

Nuxt.js对于网页的SEO是及其有帮助的,它在服务端将页面渲染好以后在展示在前端。如果想要使用好Nunxt那么就必须搞明白那些方法是在服务器端就开始运行的,哪些是在客户端运行的,简单点说,就是哪些是在服务器上跑的,哪些是在前端浏览器上跑的。

先看下官方给出的流程图

94013b11f0af60c3f02917af8ff4386c.png

首先是IncomingRequest 就是从客户端发起请求,直白点说就是你打开了网页,那么网页就要向服务器发起请求了

然后就开始执行nuxtServerInit 可以理解为服务初始化,很多人不知道nuxtServerInit用在哪里使用其实他是在strore文件夹下的 vuex文件actions中进行数据、状态初始化的,比如:

export const state = () => ({datas:{},})export const getters = {getInitData(state,post){ return state.datas}}export const mutations = {setInitData(state, gets) {state.datas = gets}}export const actions = {//数据初始化方法 async nuxtServerInit(vuexContent, context) {  let datas = await context.$axios.get'/ap/xxxx') ;  vuexContent.commit("setInitData
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值