需求：
cache使用map來實現
ES6 模塊與 CommonJS 模塊的差異
因為esm輸出的是值的引用，直接就是單例模式了
export let cache = new Cache()
版本1
思路：
注意： 在插件里面獲取的mutations-type是包含命名空間的，而在actions里面則是沒有命名空間，需要補全。
/mutation-types.js
/** * 需要緩存的數據會在mutations-type后面添加-CACHED */export const SET_HOME_INDEX = 'SET_HOME_INDEX-CACHED'/modules/home/index.jsconst actions = { /** * @description 如果有緩存，就返回把緩存的數據，傳入mutations， * 沒有緩存就從接口拿數據，存入緩存，把數據傳入mutations */ async fetchAction ({commit}, {mutationType, fetchData, oPayload}) { // vuex開啟了命名空間，所這里從cachekey要把命名空間前綴 + type + 把payload格式化成JSON const cacheKey = NAMESPACE + mutationType + JSON.stringify(oPayload) const cacheResponse = cache.get(cacheKey || '') if (!cacheResponse) { const [err, response] = await fetchData() if (err) { console.error(err, 'error in fetchAction') return false } commit(mutationType, {response: response, oPayload}) } else { console.log('已經進入緩存取數據?。?！') commit(mutationType, {response: cacheResponse, oPayload}) } }, loadHomeData ({ dispatch, commit }) { dispatch( 'fetchAction', { mutationType: SET_HOME_INDEX, fetchData: api.index, } ) }}const mutations = { [SET_HOME_INDEX] (state, {response, oPayload}) {},}const state = { indexData: {}}export default { namespaced: NAMESPACED, actions, state, getters, mutations}編寫插件，在這里攔截mutations，判斷是否要緩存
/plugin/cache.js
import cache from 'src/store/util/CacheOfStore'// import {strOfPayloadQuery} from 'src/store/util/index'/** * 在每次mutations提交之后，把mutations-type后面有CACHED標志的數據存入緩存， * 現在key值是mutations-type * 問題： * 沒辦法區分不同參數query的請求， * * 方法1: 用每個mutations-type + payload的json格式為key來緩存數據 */function cachePlugin () { return store => { store.subscribe(({ type, payload }, state) => { // 需要緩存的數據會在mutations-type后面添加CACHED const needCache = type.split('-').pop() === 'CACHED' if (needCache) { // 這里的type會自動加入命名空間所以 cacheKey = type + 把payload格式化成JSON const cacheKey = type + JSON.stringify(payload && payload.oPayload) const cacheResponse = cache.get(cacheKey) // 如果沒有緩存就存入緩存 if (!cacheResponse) { cache.set(cacheKey, payload.response) } } console.log(cache) }) }}const plugin = cachePlugin()export default pluginstore/index.js
import Vue from 'vue'import Vuex from 'vuex'import home from './modules/home'import cachePlugin from './plugins/cache'Vue.use(Vuex)const store = new Vuex.Store({ modules: { home, editActivity, editGuide } plugins: [cachePlugin]})export default store版本2
思路：直接包裝fetch函數，在里面里面判斷是否需要緩存，緩存是否超時。
優化點：
/actions.js
const actions = { async loadHomeData ({ dispatch, commit }, oPayload) { commit(SET_HOME_LOADSTATUS) const [err, response] = await fetchOrCache({ api: api.index, queryArr: oPayload.queryArr, mutationType: SET_HOME_INDEX }) if (err) { console.log(err, 'loadHomeData error') return [err, response] } commit(SET_HOME_INDEX, { response }) return [err, response] }}在fetchOrCache判斷是需要緩存，還是請求接口
/** * 用這個函數就說明是需要進入緩存 * @param {*} api 請求的接口 * @param {*} queryArr 請求的參數 * @param {*} mutationType 傳入mutationType作為cache的key值 */export async function fetchOrCache ({api, queryArr, mutationType, diff}) { // 這里是請求接口 const fetch = httpGet(api, queryArr) const cachekey = `${mutationType}:${JSON.stringify(queryArr)}` if (cache.has(cachekey)) { const obj = cache.get(cachekey) if (cacheFresh(obj.cacheTimestemp, diff)) { return cloneDeep(obj) } else { // 超時就刪除 cache.delete(cachekey) } } // 不取緩存的處理 let response = await fetch() // 時間戳綁定在數組的屬性上 response.cacheTimestemp = Date.now() cache.set(cachekey, response) // 返回cloneDeep的對象 return cloneDeep(response)}/** * 判斷緩存是否失效 * @param {*} diff 失效時間差，默認15分鐘=900s */const cacheFresh = (cacheTimestemp, diff = 900) => { if (cacheTimestemp) { return ((Date.now() - cacheTimestemp) / 1000) <= diff } else { return true }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
