這篇文章主要介紹了Vuex和前端緩存整合的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
如何存放或更新緩存？
緩存數(shù)據(jù)來源是預(yù)知的，我們可以預(yù)先定義哪些 mutation 是緩存相關(guān)的。
我們期望這個(gè)過程更自然一點(diǎn)，通過某種變化自動(dòng)映射，使以后不管緩存類別增加還是減少都能修改極少的代碼來應(yīng)對(duì)變化。
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ù)避免請(qǐng)求？
只需要在緩存相關(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ù)類別對(duì)應(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)在于：加后綴??！加后綴?。?！
如果一個(gè)數(shù)據(jù)的相關(guān)邏輯復(fù)雜，可能對(duì)應(yīng)很多個(gè) mutationType，每個(gè)都需要：加后綴！
要是代碼能自動(dòng)識(shí)別需要走緩存的 mutationType 就完美了！
mutationType 默認(rèn)的格式為 module-type，假如業(yè)務(wù)中一個(gè) module 對(duì)應(yīng)一個(gè)數(shù)據(jù)類別，我們就可以基于 module 作緩存識(shí)別。
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)模塊配置。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vuex和前端緩存整合的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
