關(guān)于vuex，我們聽(tīng)到最多的是vuex是一個(gè)狀態(tài)管理容器，可以解決組件之間通信的痛點(diǎn)。但vuex真的只是這樣嗎？
平時(shí)，我更喜歡將vuex比喻成一個(gè)前端程序的數(shù)據(jù)庫(kù)。他可以儲(chǔ)存各種數(shù)據(jù)，需要什么直接過(guò)去拿就行。我們都知道，單頁(yè)面應(yīng)用只要頁(yè)面跳轉(zhuǎn)了，data中的數(shù)據(jù)都會(huì)清空。但store中的數(shù)據(jù)不會(huì)清空，只有在頁(yè)面刷新時(shí)，會(huì)清空store中的數(shù)據(jù)
一.那我們是不是可以這樣設(shè)計(jì)？
當(dāng)我們需要獲取數(shù)據(jù)時(shí)，在action中發(fā)起請(qǐng)求，然后將數(shù)據(jù)直接放到store里面。每當(dāng)我們進(jìn)入這個(gè)頁(yè)面，都先判斷一下store中有沒(méi)有這些數(shù)據(jù)，如果有就直接拿，沒(méi)有的話就通過(guò)action發(fā)出請(qǐng)求
二.實(shí)際應(yīng)用
場(chǎng)景說(shuō)明：
這是一個(gè)移動(dòng)端的產(chǎn)品，首頁(yè)有輪播圖組件。每次我們進(jìn)入這個(gè)頁(yè)面，都需要發(fā)起請(qǐng)求獲取輪播圖的一些數(shù)據(jù)。大家可以想像一下。通常我們我們使用這個(gè)應(yīng)用的時(shí)候，點(diǎn)擊美食 > 退回首頁(yè) > 點(diǎn)擊酒店 >退回首頁(yè) ......
我們進(jìn)入首頁(yè)的時(shí)候非常多，如果每次進(jìn)入這個(gè)頁(yè)面，都從created鉤子去獲取數(shù)據(jù)，會(huì)發(fā)起很多次請(qǐng)求。其實(shí)這是根本沒(méi)有必要的。利用之前的思想，我們就可以實(shí)現(xiàn)如下效果。
Demo地址：
https://github.com/pppercyWang/vue-typescript-mobile
關(guān)于分頁(yè)數(shù)據(jù)的處理可以看這個(gè)PC端的管理平臺(tái)模板
https://github.com/pppercyWang/vue-typescript-admin
三.那我所有的請(qǐng)求都要在action中去請(qǐng)求，然后存在store中嗎？
其實(shí)是沒(méi)有必要的。比如說(shuō)一些列表的數(shù)據(jù)可以放在store中。但是一些短暫性的請(qǐng)求（比如刪除，修改）就直接寫(xiě)在methods中就可以了。
如果有講的不好的地方，歡迎指正。qq:845082868
四.總結(jié)
Vuex大法好！
