vuex使用及持久化方式
更新时间:2024年08月31日 13:43:33 作者:一块小饼干儿
这篇文章主要介绍了vuex使用及持久化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、使用
第一步:引入:


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

第三步:使用:

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

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

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

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

总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue使用splice()删除数组中的一个数据 弹出窗口提示问题
这篇文章主要介绍了vue使用splice()删除数组中的一个数据 弹出窗口提示问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07
前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子
当我们在开发应用时经常需要对表单进行校验,以确保用户输入的数据符合预期,这篇文章主要给大家介绍了关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法的相关资料,需要的朋友可以参考下2023-12-12


最新评论