需求：
成都創(chuàng)新互聯(lián)是一家專業(yè)從事做網(wǎng)站、成都做網(wǎng)站的網(wǎng)絡公司。作為專業(yè)的建站公司,成都創(chuàng)新互聯(lián)依托的技術實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設、全網(wǎng)整合營銷推廣及網(wǎng)站設計開發(fā)服務！
cache使用map來實現(xiàn)
ES6 模塊與 CommonJS 模塊的差異
因為esm輸出的是值的引用，直接就是單例模式了
詳細
export let cache = new Cache()
版本1
思路：
注意： 在插件里面獲取的mutations-type是包含命名空間的，而在actions里面則是沒有命名空間，需要補全。
/mutation-types.js
重慶分公司
重慶分公司
/**
* 需要緩存的數(shù)據(jù)會在mutations-type后面添加-CACHED
*/
export const SET_HOME_INDEX = 'SET_HOME_INDEX-CACHED'
/modules/home/index.js
const actions = {
/**
* @description 如果有緩存，就返回把緩存的數(shù)據(jù)，傳入mutations，
* 沒有緩存就從接口拿數(shù)據(jù)，存入緩存，把數(shù)據(jù)傳入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('已經(jīng)進入緩存取數(shù)據(jù)?。?！')
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標志的數(shù)據(jù)存入緩存，
* 現(xiàn)在key值是mutations-type
* 問題：
* 沒辦法區(qū)分不同參數(shù)query的請求，
*
* 方法1: 用每個mutations-type + payload的json格式為key來緩存數(shù)據(jù)
*/
function cachePlugin () {
return store => {
store.subscribe(({ type, payload }, state) => {
// 需要緩存的數(shù)據(jù)會在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
思路：直接包裝fetch函數(shù)，在里面里面判斷是否需要緩存，緩存是否超時。
優(yōu)化點：
/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判斷是需要緩存，還是請求接口
/**
* 用這個函數(shù)就說明是需要進入緩存
* @param {*} api 請求的接口
* @param {*} queryArr 請求的參數(shù)
* @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()
// 時間戳綁定在數(shù)組的屬性上
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
}
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
