首页 > 其他 > 详细

解决vuex在页面刷新后数据丢失的问题

时间:2018-05-23 01:33:37      阅读:209      评论:0      收藏:0      [点我收藏+]

一、原因

  js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。

  刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。

二、解决方案

  在客户端存储数据:

  HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度。

  之前,这些都是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢,而且效率不高。

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

三、具体实现

  应用背景是用户登入后保存状态,退出后移除状态
//mutations
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
isLogin (state) {  
    if (!state.isLogin) {      
        state.isLogin=sessionStorage.getItem(isLogin);   //从sessionStorage中读取状态  
        state.username=sessionStorage.getItem(username);  
    }  
    return state.isLogin
}

  总体的实现思路是让vuex中store的状态从sessionStorage取值,并和sessionStorage保持一致

getters:{
    userInfo(state){
        if(!state.userInfo){
            state.userInfo = JSON.parse(sessionStorage.getItem(userInfo))
        }
        return state.userInfo
    }
},
mutations:{
    LOGIN:(state,data) => {
        state.userInfo = data;
        sessionStorage.setItem(userInfo,JSON.stringify(data));
    },
    LOGOUT:(state) => {
        state.userInfo = null;
        sessionStorage.removeItem(userInfo);
    }
},

  需要注意的是state里的userInfo初始化一定要是null,而不是{},否则那个判断就一直为true啦(个人遇到的一个小问题)

解决vuex在页面刷新后数据丢失的问题

原文:https://www.cnblogs.com/goloving/p/9074574.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!