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请求后端
