综合的战略vuex和前端缓存

如何存储或更新缓存

缓存的数据源是preknown，我们可以预先确定的突变是缓存。

我们希望这个过程更加自然，并通过一些变化自动映射，这样我们就可以修改很少的代码来处理未来的变化，不管缓存种类的增加还是减少。

Vuex的插件可以拦截的突变，与这种机制，我们可以制定一个战略规则。

它可以规定，所有的mutationtype需要更新缓存，必须符合这种格式：模块式缓存的密钥，非缓存的mutationtype格式模块类型。

然后你可以拦截突变，做我们想做的事情：
（store.subscribe（{类型、载荷= > { }）
const对象缓存的密钥= type.split（-）{ 2 }
如果（缓存的密钥）{
cache.save（缓存的密钥，有效载荷）
}
}）
如何从缓存中获取数据以避免请求

仅在缓存相关操作中添加缓存判断是必要的。
行动
fetchdata（{会}）{
cache.get（= const cachedata缓存的密钥）
如果（！cachedata）{
（API。GetData）。然后（数据= > {
提交（mutationtype，数据）
}）
{人}
提交（mutationtype，cachedata）
}
}
优化设计

上面做了足够的完整的缓存更新工作——>但是想想其他数据类别的未来做缓存，我们必须再次移动上面的代码格式。

那就是：添加后缀mutationtype和缓存的密钥对应的新的数据类型，需要缓存，并添加缓存获取数据的作用。

虽然在实际的编码中没有太多的工作，但它并不是最好的开发经验。

行为优化

行动中的痛点，每次你需要重复缓存的判断。它可以放在一个公共场所，每个人都可以访问的，并且最好是符合Vuex。

vuex支持行动互相调用，我们可以提交设立了一个单独的行动。
commitaction（{会}，mutationtype，GetData）{
const对象缓存的密钥= mutationtype.split（-）{ 2 }
const cachedata = cache.get（缓存的密钥| |）
如果（！cachedata）{
（软）。然后（数据= > {
提交（mutationtype，数据）
}）
{人}
提交（mutationtype，cachedata）
}
}，
fetchdata（{调度}）{
讯（'commitaction '，mutationtype，API。GetData）
}
无论您是否需要缓存，都要使用相同的操作提交它，并通过此操作做出决定。

突变的优化

突变的疼痛点是：添加后缀！添加后缀！

如果一个数据相关的逻辑是复杂的，它可能对应很多mutationtype，每个需要添加后缀！

如果代码能自动识别需要缓存的mutationtype是完美的！

对于mutationtype默认格式是模块式的，如果在业务模块对应一个数据类，我们可以识别的基于模块的缓存。
cacheconfig.js
出口默认{
模块一：'key1，
在组织'key2，
…
}
行动
commitaction（{会}，mutationtype，GetData）{
const模块= mutationtype.split（-）{ 0 }
const对象缓存的密钥= cacheconfig {模块} | |
cache.get（= const cachedata缓存的密钥）
如果（！cachedata）{
（软）。然后（数据= > {
提交（mutationtype，数据）
}）
{人}
提交（mutationtype，cachedata）
}
}，
fetchdata（{调度}）{
讯（'commitaction '，mutationtype，API。GetData）
}
拦截
（store.subscribe（{类型、载荷= > { }）
const模块= type.split（-）{ 0 }
const对象缓存的密钥= cacheconfig {模块}
如果（缓存的密钥）{
cache.save（缓存的密钥，有效载荷）
}
}）
当我们需要添加或减少缓存数据，则只需要添加或减少在cacheconfig模块配置。

总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，您可以留言交流，谢谢您的支持。