欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuex和前端緩存的整合策略詳解

 更新時間:2017年05月09日 09:21:47   投稿:daisy  
這篇文章主要給大家介紹了Vuex和前端緩存的整合策略的相關資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面隨著小編一起來看看吧。

如何存放或更新緩存?

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

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

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ù)避免請求?

只需要在緩存相關的 action 中加入緩存判斷。

action
fetchData({commit}) {
 const cacheData = Cache.get(cacheKey)
 if(!cacheData) {
  Api.getData().then(data => {
   commit(mutationType, data)
  })
 } else {
  commit(mutationType, cacheData)
 }
}

設計優(yōu)化

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

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

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

action優(yōu)化

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

Vuex 支持 action 相互調(diào)用,我們可以設置一個單獨的 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 的痛點在于:加后綴啊!加后綴啊??!

如果一個數(shù)據(jù)的相關邏輯復雜,可能對應很多個 mutationType,每個都需要:加后綴!

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

mutationType 默認的格式為 module-type,假如業(yè)務中一個 module 對應一個數(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)
 }
})

當我們需要新增或減少緩存數(shù)據(jù),只需要去 cacheConfig 中增加或減少一項模塊配置。

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關文章

  • Vue3實現(xiàn)LuckSheet在線預覽Excel表格

    Vue3實現(xiàn)LuckSheet在線預覽Excel表格

    在前端開發(fā)中預覽Excel文件是常見的需求之一,本文將介紹如何使用Vue.js框架以及兩個優(yōu)秀的Excel庫——LuckyExcel和Luckysheet,來實現(xiàn)Excel文件在線預覽功能,希望對大家有所幫助
    2023-11-11
  • Vue2.0 實現(xiàn)頁面緩存和不緩存的方式

    Vue2.0 實現(xiàn)頁面緩存和不緩存的方式

    今天小編就為大家分享一篇Vue2.0 實現(xiàn)頁面緩存和不緩存的方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue3優(yōu)雅的實現(xiàn)跨組件通信的常用方法總結(jié)

    Vue3優(yōu)雅的實現(xiàn)跨組件通信的常用方法總結(jié)

    開發(fā)中經(jīng)常會遇到跨組件通信的場景,props?逐層傳遞的方法實在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實例講解的非常詳細,需要的朋友可以參考下
    2023-11-11
  • element?el-tooltip實現(xiàn)自定義修改樣式

    element?el-tooltip實現(xiàn)自定義修改樣式

    本文主要介紹了element?el-tooltip實現(xiàn)自定義修改樣式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • element-ui 實現(xiàn)響應式導航欄的示例代碼

    element-ui 實現(xiàn)響應式導航欄的示例代碼

    這篇文章主要介紹了element-ui 實現(xiàn)響應式導航欄的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-05-05
  • vuex分模塊后,實現(xiàn)獲取state的值

    vuex分模塊后,實現(xiàn)獲取state的值

    這篇文章主要介紹了vuex分模塊后,實現(xiàn)獲取state的值,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue默認插槽的理解與實例代碼

    vue默認插槽的理解與實例代碼

    對于插槽的概念和使用,這是vue的一個難點,這需要我們靜下心來,慢慢研究,下面這篇文章主要給大家介紹了關于vue默認插槽的相關資料,需要的朋友可以參考下
    2021-11-11
  • Vue3中watch的使用詳解

    Vue3中watch的使用詳解

    這篇文章主要介紹了Vue3中watch的詳解,主要包括Vue2使用watch及Vue3使用watch的方法,通過多種情況實例代碼相結(jié)合給大家詳細講解,需要的朋友可以參考下
    2022-11-11
  • Vue組件的通信方式詳解

    Vue組件的通信方式詳解

    這篇文章主要介紹的是Vue組件間的通信方式,本文將系統(tǒng)的介紹了幾種不使用Vuex,比較實用的組件間的通信方式,希望能幫助到大家
    2023-04-04
  • vue3.0 搭建項目總結(jié)(詳細步驟)

    vue3.0 搭建項目總結(jié)(詳細步驟)

    這篇文章主要介紹了vue3.0 搭建項目總結(jié)(詳細步驟),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05

最新評論