需求：

1. 要求接口以後，緩存當前接口的數據，下次要求一致接口時拿緩存數據，不再從新要求
2. 增加緩存失效時刻

cache運用map來完成

1. ES6 模塊與 CommonJS 模塊的差別

• CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的援用。
• CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

由於esm輸出的是值的援用，直接就是單例形式了

細緻

export let cache = new Cache()

版本1

思緒：

1. 在vuex註冊插件，插件會在每次mutations提交以後，推斷要不要寫入cache
2. 在提交actions的時刻推斷是不是有cache，有就拿cache內里的數據，然後把數據commit給mutataios

注重： 在插件內里獵取的mutations-type是包括定名空間的，而在actions內里則是沒有定名空間，須要補全。
/mutation-types.js

/**
 * 須要緩存的數據會在mutations-type背面增加-CACHED
 */
export const SET_HOME_INDEX = 'SET_HOME_INDEX-CACHED'

/modules/home/index.js

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
}

編寫插件，在這裏阻攔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 plugin

store/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

思緒：

1. 直接包裝fetch函數，在內里內里推斷是不是須要緩存，緩存是不是超時。

優化點：

1. 把底本疏散的cache操縱一致放入到fetch
2. 減少了對定名空間的操縱
3. 增加了緩存有用時刻

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