Fetch(){
當(dāng)頁(yè)面加載時(shí)觸發(fā)可以執(zhí)行跨域請(qǐng)求來(lái)觸發(fā)action來(lái)修改state需要return一個(gè)promise
axios發(fā)送的請(qǐng)求都是promise
頁(yè)面會(huì)在http請(qǐng)求結(jié)束后渲染 即頁(yè)面可以從this.$store中獲取action修改的state
不可以return數(shù)據(jù)給頁(yè)面
當(dāng)然也可以不返回promise直接調(diào)用store.dispatch()來(lái)修改state中的數(shù)據(jù)
}
asyncData({isClient,isServer,store,route,params,redirect,req,res}){
可以return數(shù)據(jù)給頁(yè)面
也可以返回一個(gè)promise執(zhí)行跨域返回?cái)?shù)據(jù)
}
fetch和asyncData在客戶端渲染時(shí)都會(huì)被當(dāng)成created觸發(fā) 里面調(diào)用的store其實(shí)就是this.$store
asyncData返回的對(duì)象就是data ?并且不管是服務(wù)端渲染還是客戶端渲染都會(huì)執(zhí)行在組件渲染之前
父組件每次渲染都是一個(gè)新對(duì)象 所以里面不應(yīng)該保留數(shù)據(jù) ?數(shù)據(jù)統(tǒng)一由store來(lái)控制
Middleware(){
中間件也有上下文對(duì)象作為參數(shù)
和上面一樣也分服務(wù)端渲染和客戶端渲染
所以不能用req.session來(lái)判斷 因?yàn)槿绻诳蛻舳虽秩緯r(shí)是沒(méi)有req的
所以還是用store中的state作為判斷比較好
}
nuxtServerInit(){
store中的action
該函數(shù)會(huì)在每次調(diào)用服務(wù)端渲染時(shí)觸發(fā)初始化state
可以用來(lái)把session中的數(shù)據(jù)在這里面存儲(chǔ)到state上
這樣的話保證了每個(gè)頁(yè)面都可以訪問(wèn)到session中的數(shù)據(jù)
}
在頁(yè)面上修改了session中的內(nèi)容的話記得需要刷新當(dāng)前頁(yè)面 以調(diào)用nuxServerInit來(lái)初始化對(duì)應(yīng)session的state以保證頁(yè)面當(dāng)前是session是最新的
頁(yè)面中的數(shù)據(jù)的話還是建議發(fā)送異步給后端取因?yàn)閟tore中的state只會(huì)在服務(wù)端渲染時(shí)初始化也就是說(shuō)當(dāng)前頁(yè)面的子組件中需要展示的數(shù)據(jù)越多 初始化時(shí)需要加載的數(shù)據(jù)也越多 有可能會(huì)導(dǎo)致加載過(guò)慢 ??并且子組件無(wú)法與用戶進(jìn)行交互 除非靠跳頁(yè)交互 ?所以還是需要使用ajax所以頁(yè)面中的數(shù)據(jù)建議ajax請(qǐng)求后端
