美文网首页
nuxt - nuxtServerInit & 页面渲染前的st

nuxt - nuxtServerInit & 页面渲染前的st

作者: 前端girl吖 | 来源:发表于2019-01-18 18:03 被阅读0次
    nuxtServerInit 方法

    状态书文件中指定了nuxtServerInit方法,Nuxt,js调用它的时候会将页面的context上下文对象作为第2个参数传给它(服务端调用)[与fetch一样,不包括context.redirect和context.error方法],当我们想要将服务端的一些数据传到客户端,可以通过这个获取保存在状态中,客户端再从状态里取

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

    context上下文对象:
    属性 类型 可用 描述
    app vue根实例 客户端 & 服务端 包含所有插件的根实例。例如:想使用axios,可以通过context.app.$axios获取
    isClient Boolean 客户端 & 服务端 是否来自客户端渲染,废弃,请使用process.client
    isServer Boolean 客户端 & 服务端 是否来自服务端渲染,废弃,请使用process.server
    isStatic Boolean 客户端 & 服务端 是否通过nuxt generate
    isDev Boolean 客户端 & 服务端 是否开发模式,在生产坏境的数据缓存中用到
    isHMR Boolean 客户端 & 服务端 是否通过模块热替换,仅在客户端以dev模式
    route 路由 客户端 & 服务端 路由实例
    store vuex数据 客户端 & 服务端 Vuex.sttore实例
    env l Object 客户端 & 服务端 nuxt.config.js中的环境变量
    params Object 客户端 & 服务端 route.params的别名
    query Object 客户端 & 服务端 route.query的别名
    req http.Request 服务端 Node.js API的Request对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
    res http.Reponse 服务端 Node.js API的Reponse对象。如果nuxt以中间件形式使用的话,这个对象就根据你所使用的框架(个人理解为页面)而定。nuxt generate 不可用
    redirect Function 服务端 用于重定向另一个路由,状态码在服务端被使用,默认302 redirect([status,]path[,query])
    error Function 客户端 & 服务端 前往错误页面,error(parmas),params包含statusCode和message字段
    nuxtState Object 客户端 nuxt状态
    beforeNuxtRender(fn) Function 服务端 更新NUXT在客户端呈现的变量,具体了解请看官网

    fetch
    • 放在asyncData一章一起

    页面渲染前的store处理

    vue-cil项目中通过localstorage或者cookie使vuex的状态持久化,因为vuex刷新后数据会丢失。
    nuxt项目中created钩子中不存在window对象(localstorage或者cookie的设置需要window对象),比如想要获取登录状态即判断是否存在token时,只能在mounted中进行操作,但这样又会引发一个问题,就是进页面的一瞬间还是无法得知登录状态,体验上会有影响,会存在显示用户名等组件显示隐藏延迟。

    !!!这时候nuxt提供的fetch钩子和nuxtServerInit(均运行在服务端)起作用了,都能帮助我们在页面渲染(组件加载 )前快速操作store。

      // 法一: fetch()方法
      //indev.vue
      export default {
         async fetch({ app, store, params}) {
            let { data } = app.$axios.get(/token)
            store.commit('setToken', data.token)
        }
      }
       // 法二: nuxtServerInit()方法
      //store/index.js
      import Vuex from 'vuex'
    
      let store = () => new Vuex.store({
         state: {
             token: ''
         },
         mutations: {
             setToken (state, token) {
                state.token = token
             }
         },
         actions: {
             nuxtServerInit({ commit}, { req }) {
                 let cookie = req,headers.cookie
                 commit('setToken ', cookie.token)
             }
         }
      })
    

    相关文章

      网友评论

          本文标题:nuxt - nuxtServerInit & 页面渲染前的st

          本文链接:https://www.haomeiwen.com/subject/atnndqtx.html