DDR爱好者之家

使用sessionStorage解决vuex在页面刷新后数据被清除的问题
站长资源 2024/11/26 佚名
9 1538
DDR爱好者之家 Design By 杰米

1.原因

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

2.解决方法

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度

我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化

3.具体实现

应用背景是用户登入后保存状态，退出后移除状态

mutations.js

ADD_LOGIN_USER (state,data) { //登入，保存状态 
 sessionStorage.setItem("username", data); //添加到sessionStorage 
 sessionStorage.setItem("isLogin",true); 
 state.username=data,  //同步的改变store中的状态 
 state.isLogin=true 
 }, 
 SIGN_OUT (state) { //退出，删除状态 
 sessionStorage.removeItem("username"); //移除sessionStorage 
 sessionStorage.removeItem("isLogin"); 
 state.username=''  //同步的改变story中的状态 
 state.isLogin=false 
 }

getters.js

isLogin (state) { 
 if (!state.isLogin) { 
  state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 
  state.username=sessionStorage.getItem('username'); 
 } 
 return state.username 
 }

总体的实现思路是让vuex中story的状态和sessionStorage保持一致（从sessionStorage取值）

4.后话

之前踩了一个大坑，没注意到vuex可以让组件响应式变化，让组件直接取了sessionStorage的值，弄的我还必须刷新才能看到退出后的效果。

补充：

下面看戏vuex存储和本地存储(localstorage、sessionstorage)的区别

1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地

2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。

注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别1。

总结

以上所述是小编给大家介绍的vuex在页面刷新后数据被清除问题的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米