关于nuxt数据渲染

Fetch(){

当页面加载时触发可以执行跨域请求来触发action来修改state需要return一个promise

axios发送的请求都是promise

页面会在http请求结束后渲染 即页面可以从this.$store中获取action修改的state

不可以return数据给页面

当然也可以不返回promise直接调用store.dispatch()来修改state中的数据

}

asyncData({isClient,isServer,store,route,params,redirect,req,res}){

可以return数据给页面

也可以返回一个promise执行跨域返回数据

}


fetch和asyncData在客户端渲染时都会被当成created触发 里面调用的store其实就是this.$store

asyncData返回的对象就是data  并且不管是服务端渲染还是客户端渲染都会执行在组件渲染之前

父组件每次渲染都是一个新对象 所以里面不应该保留数据  数据统一由store来控制


Middleware(){

中间件也有上下文对象作为参数

和上面一样也分服务端渲染和客户端渲染

所以不能用req.session来判断 因为如果在客户端渲染时是没有req的

所以还是用store中的state作为判断比较好

}

nuxtServerInit(){

store中的action

该函数会在每次调用服务端渲染时触发初始化state

可以用来把session中的数据在这里面存储到state上

这样的话保证了每个页面都可以访问到session中的数据

}

在页面上修改了session中的内容的话记得需要刷新当前页面 以调用nuxServerInit来初始化对应session的state以保证页面当前是session是最新的

页面中的数据的话还是建议发送异步给后端取因为store中的state只会在服务端渲染时初始化也就是说当前页面的子组件中需要展示的数据越多 初始化时需要加载的数据也越多 有可能会导致加载过慢   并且子组件无法与用户进行交互 除非靠跳页交互  所以还是需要使用ajax所以页面中的数据建议ajax请求后端

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,079评论 19 139
  • React中没有类似Angular那样的双向数据绑定,在做一些表单复杂的后台类页面时,监听、赋值、传递、校验时编码...
    tedyuen777阅读 9,903评论 1 23
  • 提高效率没有想象中那么玄,其实很简单,就是物理上的概念: 串联,两个任务一先一后,调整一下先后顺序就可以提高效率并...
    HR楠不倒阅读 219评论 0 0
  • 作者:海冰 活生生的活着! 心中有爱, 身体健康。 拥有自己的呼吸 拥有自己的节律 拥有自己的跳动 能自由的说出自...
    杨栎颖阅读 479评论 0 0
  • 今天是2016年8月6日,你来到这个世界已经42天了。此时(9:31),爸爸正在西去格尔木的军列上,你妈妈每天...
    13487f825f4d阅读 235评论 0 0