Vuex和前端缓存的整合策略详解

作者:daisy 时间:2024-05-09 15:17:14 

如何存放或更新缓存?

缓存数据来源是预知的,我们可以预先定义哪些 mutation 是缓存相关的。

我们期望这个过程更自然一点,通过某种变化自动映射,使以后不管缓存类别增加还是减少都能修改极少的代码来应对变化。

Vuex的插件可以拦截 mutations,借助这个机制,我们可以制定一种策略化的规则。

可以规定,所有需要更新缓存的 mutationType 都要符合这种格式:module-type-cacheKey,非缓存的 mutationType 格式为 module-type。

那么就可以拦截 mutation,去做我们想做的事了:


store.subscribe(({ type, payload }) => {
const cacheKey = type.split('-')[2]
if (cacheKey) {
 Cache.save(cacheKey, payload)
}
})

如何从缓存取数据避免请求?

只需要在缓存相关的 action 中加入缓存判断。


action
fetchData({commit}) {
const cacheData = Cache.get(cacheKey)
if(!cacheData) {
 Api.getData().then(data => {
  commit(mutationType, data)
 })
} else {
 commit(mutationType, cacheData)
}
}

设计优化

以上的确已经足够完成缓存 读取 --> 更新 的工作了。但试想一下将来某个其他数据类别要做缓存,我们就要把上面的代码格式再搬一遍。

即:把新的需要缓存的数据类别对应的 mutationType 加 cacheKey 后缀,把获取数据的 action 中加缓存判断。

虽然实际编码中也没有多大的工作量,但感觉还不是最好的开发体验。

action优化

action 中的痛点是:每次都需要重复写缓存判断。可以把这个判断过程拿出来放到一个大家都能访问到的公共的地方,且最好是与 Vuex 契合的。

Vuex 支持 action 相互调用,我们可以设置一个单独的 action 用来提交。


commitAction({ commit }, mutationType, getData) {
const cacheKey = mutationType.split('-')[2]
const cacheData = Cache.get(cacheKey || '')
if(!cacheData) {
 getData().then(data => {
  commit(mutationType, data)
 })
} else {
 commit(mutationType, cacheData)
}
},
fetchData({ dispatch }) {
dispatch('commitAction', mutationType, Api.getData)
}

不管是否需要缓存最终都走同一个 action 去提交,由这个 action 去做决策。

mutation优化

mutation 的痛点在于:加后缀啊!加后缀啊!!

如果一个数据的相关逻辑复杂,可能对应很多个 mutationType,每个都需要:加后缀!

要是代码能自动识别需要走缓存的 mutationType 就完美了!

mutationType 默认的格式为 module-type,假如业务中一个 module 对应一个数据类别,我们就可以基于 module 作缓存识别。


cacheConfig.js
export default {
module1: 'key1',
module2: 'key2',
//...
}

action
commitAction({ commit }, mutationType, getData) {
const module = mutationType.split('-')[0]
const cacheKey = CacheConfig[module] || ''
const cacheData = Cache.get(cacheKey)
if(!cacheData) {
 getData().then(data => {
  commit(mutationType, data)
 })
} else {
 commit(mutationType, cacheData)
}
},
fetchData({ dispatch }) {
dispatch('commitAction', mutationType, Api.getData)
}
interceptor
store.subscribe(({ type, payload }) => {
const module = type.split('-')[0]
const cacheKey = CacheConfig[module]
if (cacheKey) {
 Cache.save(cacheKey, payload)
}
})

当我们需要新增或减少缓存数据,只需要去 cacheConfig 中增加或减少一项模块配置。

来源:https://imys.net/20170318/vuex-cache-design.html

标签:vuex,前端,缓存
0
投稿

猜你喜欢

  • python记录程序运行时间的三种方法

    2023-08-25 03:12:19
  • python 列表,集合和字典的增删改查

    2021-06-20 04:31:37
  • 对Web开发人员有用的8个网站小结

    2022-01-16 09:39:20
  • 修改SQL Server 2005 sa用户密码的方法

    2008-12-10 14:41:00
  • python主线程捕获子线程的方法

    2022-06-07 21:25:46
  • Python 移动光标位置的方法

    2023-09-07 03:15:25
  • Python Opencv中基础的知识点

    2023-06-08 21:10:48
  • Kubernetes上使用Jaeger分布式追踪基础设施详解

    2024-05-29 22:08:52
  • python利用dir函数查看类中所有成员函数示例代码

    2021-02-17 19:06:23
  • python numpy 一维数组转变为多维数组的实例

    2023-03-19 23:30:10
  • W3C web标准概念入门

    2008-05-25 15:06:00
  • 解决Python2.7读写文件中的中文乱码问题

    2023-05-16 11:23:51
  • ThinkPHP中url隐藏入口文件后接收alipay传值的方法

    2024-05-03 15:50:25
  • Pytho的HTTP交互httpx包模块使用详解

    2022-11-17 06:03:29
  • 非常详细的SQL--JOIN之完全用法

    2024-01-17 11:59:19
  • 妄想or未来?界面的虚拟现实化

    2010-03-01 12:53:00
  • Python+matplotlib绘制不同大小和颜色散点图实例

    2021-12-02 08:50:32
  • 关于“简单,可依赖”

    2008-10-22 13:33:00
  • asp如何做一个树状展开视图来显示自己的记录结构?

    2010-07-12 18:56:00
  • accept-charset与Header P3P

    2009-04-01 18:43:00
  • asp之家 网络编程 m.aspxhome.com