项目标题配置等发生变化,用户需要手动清除缓存才能看见?

66 阅读2分钟

你们好,我是金金金。

image.png

场景

当更改配置后,重新部署后 用户访问后台,需手动清除本地缓存,才能看见最新的标题变化
我这里的配置是放在LocalStorage本地存储当中

image.png

image.png

  • 可以看到state的themeConfig对象里面是整个项目的配置。

排查

排查之前我先贴一下代码

  • App.vue

image.png

问题就出在这,当缓存里面有配置数据就赋值 导致一直拿的都是第一次缓存里面存入的配置。

造成error的原因

  1. 当用户第一次访问网站的时候,这时候已经在用户的本地存储存入了这些配置
  2. 之后访问 读取的一直是第一次存入的配置导致更新也没变化,需手动清除缓存才能看见最新的配置

解决

  • 我们知道导致问题的原因是出在这个判断条件上

image.png

  1. 我们在配置里面加一个版本号,之后修改了一次配置则需要手动更改一下版本号即可

image.png

  1. App.vue里面的判断逻辑更改

image.png

  1. 从缓存中 解构取出版本号
  2. 判断缓存中的版本号是否和本地的版本号一致,一致则未修改 继续从缓存里面拿,不一致则不从缓存里面取,这样就是最新的配置版本
  • 完美解决用户需手动清除缓存才能看见最新配置~

总结

主要是逻辑判断的问题,读取的一直是第一次存入本地存储的配置,加个版本号,更改配置时手动改一下版本号然后在程序判断里面控制一下即可!

  • 编写有误还请大佬指正,万分感谢。