Vuex和前端緩存整合的方法

今天小編給大家分享一下Vuex和前端緩存整合的方法的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

如何存放或更新緩存？

緩存數(shù)據(jù)來源是預(yù)知的，我們可以預(yù)先定義哪些 mutation 是緩存相關(guān)的。

我們期望這個過程更自然一點，通過某種變化自動映射，使以后不管緩存類別增加還是減少都能修改極少的代碼來應(yīng)對變化。

Vuex的插件可以攔截 mutations，借助這個機制，我們可以制定一種策略化的規(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è)計優(yōu)化

以上的確已經(jīng)足夠完成緩存 讀取 --> 更新 的工作了。但試想一下將來某個其他數(shù)據(jù)類別要做緩存，我們就要把上面的代碼格式再搬一遍。

即：把新的需要緩存的數(shù)據(jù)類別對應(yīng)的 mutationType 加 cacheKey 后綴，把獲取數(shù)據(jù)的 action 中加緩存判斷。

雖然實際編碼中也沒有多大的工作量，但感覺還不是最好的開發(fā)體驗。

action優(yōu)化

action 中的痛點是：每次都需要重復(fù)寫緩存判斷。可以把這個判斷過程拿出來放到一個大家都能訪問到的公共的地方，且最好是與 Vuex 契合的。

Vuex 支持 action 相互調(diào)用，我們可以設(shè)置一個單獨的 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)
}

不管是否需要緩存最終都走同一個 action 去提交，由這個 action 去做決策。

mutation優(yōu)化

mutation 的痛點在于：加后綴啊！加后綴啊?。?/p>

如果一個數(shù)據(jù)的相關(guān)邏輯復(fù)雜，可能對應(yīng)很多個 mutationType，每個都需要：加后綴！

要是代碼能自動識別需要走緩存的 mutationType 就完美了！

mutationType 默認的格式為 module-type，假如業(yè)務(wù)中一個 module 對應(yīng)一個數(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 中增加或減少一項模塊配置。

以上就是“Vuex和前端緩存整合的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。