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

前端之家收集整理的这篇文章主要介绍了使用vuex缓存数据并优化自己的vuex-cache前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需求:

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

cache使用map来实现

ES6 模块与 CommonJS 模块的差异

  1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  2. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

因为esm输出的是值的引用,直接就是单例模式了

详细

版本1

思路:

  1. 在vuex注册插件插件会在每次mutations提交之后,判断要不要写入cache
  2. 在提交actions的时候判断是否有cache,有就拿cache里面的数据,然后把数据commit给mutataios

注意: 在插件里面获取的mutations-type是包含命名空间的,而在actions里面则是没有命名空间,需要补全。

/mutation-types.js

添加-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

{ 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

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

在fetchOrCache判断是需要缓存,还是请求接口

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

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

猜你在找的Vue相关文章