vuex使用及持久化方式
一、使用
第一步:引入:


第二步:定义:注意有nameSpaced,为模块定义命名空间,避免命名冲突

第三步:使用:

二、vuex state中的数据,刷新时不能保持
例如:

三、如何持久化?
1、利用localStorage,sessionStorage
beforeunload事件:是一个浏览器事件,它在用户尝试离开当前页面(例如,通过关闭标签页、刷新页面或访问另一个 URL)之前触发。
这个事件可以用来提示用户确认离开,或者在用户离开页面时执行一些清理工作。

2、利用vuex-presistedstate
第一步:npm install vuex-persistedstate
第二步:

key:存储数据的键paths:需要持久化的状态路径storage:存储方式,可以是 localStorage 或 sessionStorage
以上两步完成后即生效,刷新页面时即是持久化的数据:

总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解决antd 表单设置默认值initialValue后验证失效的问题
这篇文章主要介绍了解决antd 表单设置默认值initialValue后验证失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)
这篇文章主要介绍了vue中关于element的el-image 图片预览功能增加一个下载按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
vue中使用echarts并根据选择条件动态展示echarts图表
虽然老早就看过很多echarts的例子, 但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue中使用echarts并根据选择条件动态展示echarts图表的相关资料,需要的朋友可以参考下2023-12-12


最新评论