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

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

{ 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

Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
home,editActivity,editGuide
}
plugins: [cachePlugin]
})

export default store

{ if (cacheTimestemp) { return ((Date.now() - cacheTimestemp) / 1000) <= diff } else { return true } }