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

需求：

1. 请求接口之后，缓存当前接口的数据，下次请求同一接口时拿缓存数据，不再重新请求
2. 添加缓存失效时间

cache使用map来实现

es6 模块与 commonjs 模块的差异

1. commonjs 模块输出的是一个值的拷贝，es6 模块输出的是值的引用。
2. 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

思路：直接包装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
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。