Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 643|回复: 0

聊聊 electron-vue-serialport 的添加数据持久化分析以及解决方案,关联 pouchdb 、nedb 、vuex-persistedstate

[复制链接]
  • TA的每日心情
    奋斗
    2024-4-6 11:05
  • 签到天数: 748 天

    [LV.9]以坛为家II

    2034

    主题

    2092

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    705612
    发表于 2021-9-2 16:04:30 | 显示全部楼层 |阅读模式

    什么是 数据持久化?

    数据持久化其实就是指期望把数据长期存储下来,而这个问题被拆分成很多场合,用这篇记录一下一些细节和过程。

    起因

    起因 electron-vue-serialport 使用的 electron-vue 基础 vue-admin-template 在 yarn run dev 下 js-cookie 正常使用,但 build 后无法获取存放在 Cookie 中的 token 数据,经过写入后读取的测试返回仍然是 undefined 。

    这也就说明它可能并非真正的同步模式,考虑到有太多组件的融合,最初判断是 electron 的 Cookies 炸了,例如需要时间连接本地数据,但可能加载过程过快,无法在获取 token 前完成数据的载入,也有可能是本来就存在的版本 bug 之类的。

    准备解决方案

    既然存在 bug ,然后也没法通过更新环境解决的情况下,就直接改写之。

    • 既然是要 cookie 数据,那就用其他数据模拟一个接口送回即可。
    • 既然要持久化数据,考虑到之后也有小型数据库需求,不妨一起考虑。

    于是选取了 pouchdb 和 nedb 做长期存储,不过此时将失去 Cookies 的过期功能,但好像也并非所要的功能。

    实践结论

    为什么我在做仪器类客户端还需要这个登录的功能是因为,设备机型的登录表示你所使用的配置版本,这样的好处就是统一入口,然后分发不同的功能接口,对于一个公司来说相对规范化整体框架。

    最早怀疑是 mock 在 electron 无法工作的原因,后来经过检查是 build 后的 electron 的 js-cookie 无法工作,然后观察 js-cookie 的设计模式是同步的,这与上述的数据库的使用相违背,不得已修正为异步调用。

    其中 pouchdb 存在的问题是 electron 的 Windows 32 bit 无法编译通过,而 pouchdb-browser 存在于 浏览器 的 local storage 中无法满足我需要的本地化文件,就换了 nedb ,辛苦写了模型对上去后,一切正常工作后。

    又产生新的问题,就是 Cookies 数据没有先于 login 验证前加载完成,导致需要重新登录,这是因为 electron 关闭后,要加载数据回来需要的一些异步时间,而页面启动后,不可能会允许写一段毫无意义的延时同步数据(下下策),那么如何解决呢?

    回到原点

    最后放弃写垃圾代码注入其中,改用 vuex 的 vuex-persistedstate 插件,自动在框架内部同步数据,强组件绑定关系。

    很意外的是,如果一开始我就想清楚我想要的效果,可能就会少走这些弯路,但实际上也是由于,我并不了解 electron vue nodejs 等数据持久化组件的选取,所以要预先了解和学习一波才能应用到其中。

    最后代码反而删减了,基本没有做任何改动,也没有添加多余的模拟接口注入。

    更新在 remove auth Cookies and use vuex-persistedstate

    个人感悟

    在现代 Javascript 的设计模式上可能要缓存+同步数据,但实际上深度绑定组件的话,可以避开不必要的异步数据同步的问题。

    最后,关联上一篇博文,因为在实践过程中分析了一下 js 的 import 机制,如果有 python 经验的可能会有些疑惑是否一致,当然答案是基本一致,可以放心的到处 import 。

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-26 02:53 , Processed in 0.070948 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表