使用vuex-persist苹果手机微信浏览器打开项目链接白屏

阅读: 评论:0

如题:苹果手机微信浏览器和电脑浏览器打开项目链接白屏,而且ie11浏览器也不能够正常打开,报错语法错误, 安卓手机却可以正常的打开链接显示?

排除过程,以为是微信内置浏览器不支持,想到会不会是兼容的问题,然后使用ie浏览器查看,发现和微信是一样的情况,控制台有报错,开始处理报错。

  1. 点开链接后,发现报错的是一个js文件,clss类的问题,并没有被编译考虑到,是不是在ie中一些语法,使用webpack的bable没有办法完全的编译,又下载使用 babel-polyfill 结果还是现在一样的错误,并未解决问题
  2. 开始看报错的源码,经过搜索与排除发现是在 node_modules 文件夹中的一个插件 vuex-persist js的问题(见下图)
    1. 那为什么会用这个插件呢?
    2. 因为当前做的这个移动端的项目是给机构做的一个类似测评系统的考试,是不运行用户在考试的时候,后退页面,和刷新页面,后退可以使用

      beforeRouteLeave 去做阻止,刷新只能监听按键的f5,没有办法控制浏览器的刷新,然后就想到,用户刷新的时候,前面的数据,还是要有所保存的,然后就使用了 vuex ,但是vuex会在刷新页面的时候,重置state的数据,这就不是我们想要的了 ,然后我们引入了一个vuex-persist插件解决这个问题

    3. vuex的优劣势
      1.      优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到
      2.      劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。
      3.      为了克服这个问题, vuex-persist  vuex-persistedstate出现了~~
    4. vuex-persist  vuex-persistedstate 原理
      1.  插件在每次mutation的时候将数据保存,存到localStorage,sessionStorage,cookie有中(具有getItem ,setItem ,removeItem一般方法的对象)
      2. 刷新页面的一瞬间,vuex数据消失,vuex回去sessionStorage中哪会数据,变相的实现了数据刷新不丢失~
      3. vuex-persist 和 vuex-persistedstate 使用的区别和用法
  3. 找到问题后,改变插件的使用,把vuex-persist 换成 vuex-persistedstate 完美解决问题
  4. 对比两个插件,发现vuex-persistTypeScript类型的,vuex-persistedstateJavaScript类型,默认的配置webpack没有去编译TypeScript,所以没有转换

结论:webpack编译的类型不对

 

 

本文发布于:2025-04-05 08:48:00,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/1743814136583961.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:浏览器   苹果   链接   项目   手机
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23