使用vuex缓存数据并优化自己的vuex-cache
时间:2019-04-15
本文章向大家介绍使用vuex缓存数据并优化自己的vuex-cache,主要包括使用vuex缓存数据并优化自己的vuex-cache使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求:
- 请求接口之后,缓存当前接口的数据,下次请求同一接口时拿缓存数据,不再重新请求
- 添加缓存失效时间
cache使用map来实现
ES6 模块与 CommonJS 模块的差异
- CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
- CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
因为esm输出的是值的引用,直接就是单例模式了
export let cache = new Cache()
版本1
思路:
- 在vuex注册插件,插件会在每次mutations提交之后,判断要不要写入cache
- 在提交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函数,在里面里面判断是否需要缓存,缓存是否超时。
优化点:
- 把原本分散的cache操作统一放入到fetch
- 减少了对命名空间的操作
- 添加了缓存有效时间
/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 } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 机器学习应用资产管理系列一:强化学习策略(附代码)
- 3分钟短文 | Laravel模型关联删除表记录,用观察者还是事件钩子
- 原理+代码|深入浅出Python随机森林预测实战
- 3分钟短文 | Laravel复杂SQL超多WHERE子句,本地作用域你没用过
- 3分钟短文 | Laravel同时连接多个数据库,你用啥办法?
- 3分钟短文 | PHP 连接2个字符串的8个方法,新手常犯错
- nodejs源码分析之connect
- 你应该了解的Nacos配置中心
- Jenkins CLI 命令行 v0.0.30
- 2020新鲜出炉的“面筋”,够刁钻
- Spring注解配置应该怎么玩
- 算法篇:链表之倒数第k个节点
- 彻底搞懂 Java 线程池,干啥都不再发憷
- Android Camera1中的对焦与测光
- 使用R语言获得16S物种丰度