使用vuex缓存数据并优化自己的vuex-cache

export let cache = new Cache()

/** * 需要缓存的数据会在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}

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 plugin

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

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] }}

/** * 用这个函数就说明是需要进入缓存 * @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 }}