IT俱乐部 JavaScript vuex使用及持久化方式

vuex使用及持久化方式

一、使用

第一步:引入:

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

第三步:使用:

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

例如:

三、如何持久化?

1、利用localStorage,sessionStorage

beforeunload事件:是一个浏览器事件,它在用户尝试离开当前页面(例如,通过关闭标签页、刷新页面或访问另一个 URL)之前触发。

这个事件可以用来提示用户确认离开,或者在用户离开页面时执行一些清理工作。

2、利用vuex-presistedstate

第一步:npm install vuex-persistedstate

第二步:

  • key:存储数据的键
  • paths:需要持久化的状态路径
  • storage:存储方式,可以是 localStorage 或 sessionStorage

以上两步完成后即生效,刷新页面时即是持久化的数据:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/13124.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部