Vuex和前端緩存的整合策略詳解
如何存放或更新緩存?
緩存數(shù)據(jù)來源是預(yù)知的,我們可以預(yù)先定義哪些 mutation 是緩存相關(guān)的。
我們期望這個(gè)過程更自然一點(diǎn),通過某種變化自動映射,使以后不管緩存類別增加還是減少都能修改極少的代碼來應(yīng)對變化。
Vuex的插件可以攔截 mutations,借助這個(gè)機(jī)制,我們可以制定一種策略化的規(guī)則。
可以規(guī)定,所有需要更新緩存的 mutationType 都要符合這種格式:module-type-cacheKey,非緩存的 mutationType 格式為 module-type。
那么就可以攔截 mutation,去做我們想做的事了:
store.subscribe(({ type, payload }) => { const cacheKey = type.split('-')[2] if (cacheKey) { Cache.save(cacheKey, payload) } })
如何從緩存取數(shù)據(jù)避免請求?
只需要在緩存相關(guān)的 action 中加入緩存判斷。
action fetchData({commit}) { const cacheData = Cache.get(cacheKey) if(!cacheData) { Api.getData().then(data => { commit(mutationType, data) }) } else { commit(mutationType, cacheData) } }
設(shè)計(jì)優(yōu)化
以上的確已經(jīng)足夠完成緩存 讀取 --> 更新 的工作了。但試想一下將來某個(gè)其他數(shù)據(jù)類別要做緩存,我們就要把上面的代碼格式再搬一遍。
即:把新的需要緩存的數(shù)據(jù)類別對應(yīng)的 mutationType 加 cacheKey 后綴,把獲取數(shù)據(jù)的 action 中加緩存判斷。
雖然實(shí)際編碼中也沒有多大的工作量,但感覺還不是最好的開發(fā)體驗(yàn)。
action優(yōu)化
action 中的痛點(diǎn)是:每次都需要重復(fù)寫緩存判斷。可以把這個(gè)判斷過程拿出來放到一個(gè)大家都能訪問到的公共的地方,且最好是與 Vuex 契合的。
Vuex 支持 action 相互調(diào)用,我們可以設(shè)置一個(gè)單獨(dú)的 action 用來提交。
commitAction({ commit }, mutationType, getData) { const cacheKey = mutationType.split('-')[2] const cacheData = Cache.get(cacheKey || '') if(!cacheData) { getData().then(data => { commit(mutationType, data) }) } else { commit(mutationType, cacheData) } }, fetchData({ dispatch }) { dispatch('commitAction', mutationType, Api.getData) }
不管是否需要緩存最終都走同一個(gè) action 去提交,由這個(gè) action 去做決策。
mutation優(yōu)化
mutation 的痛點(diǎn)在于:加后綴??!加后綴?。。?/p>
如果一個(gè)數(shù)據(jù)的相關(guān)邏輯復(fù)雜,可能對應(yīng)很多個(gè) mutationType,每個(gè)都需要:加后綴!
要是代碼能自動識別需要走緩存的 mutationType 就完美了!
mutationType 默認(rèn)的格式為 module-type,假如業(yè)務(wù)中一個(gè) module 對應(yīng)一個(gè)數(shù)據(jù)類別,我們就可以基于 module 作緩存識別。
cacheConfig.js export default { module1: 'key1', module2: 'key2', //... }
action commitAction({ commit }, mutationType, getData) { const module = mutationType.split('-')[0] const cacheKey = CacheConfig[module] || '' const cacheData = Cache.get(cacheKey) if(!cacheData) { getData().then(data => { commit(mutationType, data) }) } else { commit(mutationType, cacheData) } }, fetchData({ dispatch }) { dispatch('commitAction', mutationType, Api.getData) } interceptor store.subscribe(({ type, payload }) => { const module = type.split('-')[0] const cacheKey = CacheConfig[module] if (cacheKey) { Cache.save(cacheKey, payload) } })
當(dāng)我們需要新增或減少緩存數(shù)據(jù),只需要去 cacheConfig 中增加或減少一項(xiàng)模塊配置。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Vue3實(shí)現(xiàn)LuckSheet在線預(yù)覽Excel表格
在前端開發(fā)中預(yù)覽Excel文件是常見的需求之一,本文將介紹如何使用Vue.js框架以及兩個(gè)優(yōu)秀的Excel庫——LuckyExcel和Luckysheet,來實(shí)現(xiàn)Excel文件在線預(yù)覽功能,希望對大家有所幫助2023-11-11Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式
今天小編就為大家分享一篇Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開發(fā)中經(jīng)常會遇到跨組件通信的場景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11element?el-tooltip實(shí)現(xiàn)自定義修改樣式
本文主要介紹了element?el-tooltip實(shí)現(xiàn)自定義修改樣式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼
這篇文章主要介紹了element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05vuex分模塊后,實(shí)現(xiàn)獲取state的值
這篇文章主要介紹了vuex分模塊后,實(shí)現(xiàn)獲取state的值,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟)
這篇文章主要介紹了vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05