如何存放或更新緩存？
緩存數據來源是預知的，我們可以預先定義哪些 mutation 是緩存相關的。
我們期望這個過程更自然一點，通過某種變化自動映射，使以后不管緩存類別增加還是減少都能修改極少的代碼來應對變化。
Vuex的插件可以攔截 mutations，借助這個機制，我們可以制定一種策略化的規則。
可以規定，所有需要更新緩存的 mutationType 都要符合這種格式：module-type-cacheKey，非緩存的 mutationType 格式為 module-type。
那么就可以攔截 mutation，去做我們想做的事了：
store.subscribe(({ type, payload }) => { const cacheKey = type.split('-')[2] if (cacheKey) { Cache.save(cacheKey, payload) }})如何從緩存取數據避免請求？
只需要在緩存相關的 action 中加入緩存判斷。
actionfetchData({commit}) { const cacheData = Cache.get(cacheKey) if(!cacheData) { Api.getData().then(data => { commit(mutationType, data) }) } else { commit(mutationType, cacheData) }}設計優化
以上的確已經足夠完成緩存 讀取 --> 更新 的工作了。但試想一下將來某個其他數據類別要做緩存，我們就要把上面的代碼格式再搬一遍。
即：把新的需要緩存的數據類別對應的 mutationType 加 cacheKey 后綴，把獲取數據的 action 中加緩存判斷。
雖然實際編碼中也沒有多大的工作量，但感覺還不是最好的開發體驗。
action優化
action 中的痛點是：每次都需要重復寫緩存判斷。可以把這個判斷過程拿出來放到一個大家都能訪問到的公共的地方，且最好是與 Vuex 契合的。
Vuex 支持 action 相互調用，我們可以設置一個單獨的 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優化
mutation 的痛點在于：加后綴啊！加后綴啊！！
如果一個數據的相關邏輯復雜，可能對應很多個 mutationType，每個都需要：加后綴！
要是代碼能自動識別需要走緩存的 mutationType 就完美了！
mutationType 默認的格式為 module-type，假如業務中一個 module 對應一個數據類別，我們就可以基于 module 作緩存識別。
cacheConfig.jsexport default { module1: 'key1', module2: 'key2', //...}actioncommitAction({ 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)}interceptorstore.subscribe(({ type, payload }) => { const module = type.split('-')[0] const cacheKey = CacheConfig[module] if (cacheKey) { Cache.save(cacheKey, payload) }})當我們需要新增或減少緩存數據，只需要去 cacheConfig 中增加或減少一項模塊配置。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
