**问题背景:**页面刷新后,vuex中的数据丢失。这是因为:js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。进行刷新页面的操作,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。

解决思路:
在项目中,登录后,通过登录接口会获取到很多用户信息,首先将用户信息保存在vuex的store中,同时将这些信息也保存在sessionStorage中。这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化。

补充:
在客户端存储数据:HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限。
之前,这些都是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢,而且效率不高。

代码如下:
1.在vuex中

const state = {
token:sessionStorage.getItem(`token`)||``,
userInfo:JSON.parse(sessionStorage.getItem(`userInfo`))||{},
roleInfoList:JSON.parse(sessionStorage.getItem(`roleInfoList`))||[],
}; const getters = {
}; const mutations = {
//保存token
setToken(state,token){
sessionStorage.setItem(`token`,token)
state.token=token;
},
//保存用户登录信息
setUserInfo(state, userInfo) {
sessionStorage.setItem(`userInfo`, JSON.stringify(userInfo))
state.userInfo = userInfo;
},
//保存菜单
setRoleInfoList(state,roleInfoList){
sessionStorage.setItem(`roleInfoList`, JSON.stringify(roleInfoList))
state.roleInfoList=roleInfoList
},
} const actions = {
updateToken(context,value){
context.commit('setToken',value)
},
updateUserInfo(context,value){
context.commit('setUserInfo',value)
},
updateRoleInfoList(context,value){
context.commit('setRoleInfoList',value)
},
} export default {
namespaced: true,
state,
getters,
mutations,
actions
}

在vue组件中:

import {mapState, mapActions, mapMutations} from 'vuex'

export default {
methods: {
//登录接口
getLoginInfo() {
http.getLoginInfo({userToken}).then(data => {
//将获取到的用户信息存在vuex中
this.setUserInfo({userInfo: data});
this.updateUserInfo(data);
......
this.$message('登录成功');
}).catch(e => {
this.$message(e)
})
}, ...mapActions(`user`,[`updateToken`,`updateUserInfo`,`updateRoleInfoList`]),
...mapMutations(`user`, [`setUserInfo`, `setToken`, `setRoleInfoList`])
}
}

补充:storage只能存储字符串的数据,对于JS中常用的数组或对象不能直接存储。但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了。

var obj = { name:'Jim' };
var str = JSON.stringify(obj);
 
//存入
sessionStorage.obj = str;
//读取
str = sessionStorage.obj;
//重新转换为对象
obj = JSON.parse(str);

解决刷新页面vuex store中数据丢失的问题的更多相关文章

  1. [转]vue解决刷新页面vuex数据、params参数消失的问题

    一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...

  2. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  3. 刷新页面vuex数据不消失和不跳转页面

    先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与 ...

  4. 解决 Vue 刷新页面后 store 数据丢失的问题

    原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } },   ...

  5. vue+element 点击按钮后 导致 刷新页面 致url中拼接 ? 或者拼接参数

    https://blog.csdn.net/sinat_37255207/article/details/88917162 element 自己的<el-form></el-form ...

  6. 系统中使用frameset和Iframe刷新页面session失效

    问题:Asp.net中每次刷新页面,session中保存的只就丢失 原因: 1.有些杀毒软件会去扫描web.config文件 2.程序内部有让session丢失的代码,或服务器内存不足 3.程序有框架 ...

  7. vue下使用nginx刷新页面404

    nginx 是一个代理的服务器.出现的问题:写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404,并且从其他页面跳转可以看到但是刷新页面就404.解决方法:在文件中的 ...

  8. vuex中store保存的数据,刷新页面会清空

    用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...

  9. 解决vuex刷新页面数据丢失

    1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...

随机推荐

  1. C# 消息队列-Microsoft Azure service bus 服务总线

    先决条件 Visual Studio 2015或更高版本.本教程中的示例使用Visual Studio 2015. Azure订阅. 注意 要完成本教程,您需要一个Azure帐户.您可以激活MSDN订 ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. DOM简单梳理

    DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML ...

  4. npm run dev 启动错误:Module build failed: Error: No PostCSS Config found in:xxxxxxxxxxxxxx

    解决办法:在根目录新建postcss.config.js module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 versio ...

  5. Android 7.0及以上使用OpenCL

    由于从Android 7.0, API 24, 开始, 系统将阻止应用链接至非公开NDK库, 所以, 使用libOpenCL.so时与面向低版本的Android平台有所不同, 需要把依赖的非公开NDK ...

  6. H-ui框架信息图标点击跳出页面问题

    在html中为消息a标签添加id: 在static/h-ui/js/H-ui.min.js添加事件:

  7. myapp——自动生成小学四则运算题目的命令行程序(侯国鑫 谢嘉帆)

    1.Github项目地址 https://github.com/baiyexing/myapp.git 2.功能要求 题目:实现一个自动生成小学四则运算题目的命令行程序 功能(已全部实现) 使用 -n ...

  8. 操作DataTable数据,修改某列的值

    DataTable table : DataRow row=table.Rows[i];//DataTable的第i行 row.BeginEdit();//开始编辑行 row["column ...

  9. c/c++ 继承与多态 继承时如何改变个别成员的访问属性

    问题1:若类B以private的方式继承类A,但还想让类A的某些个别成员,保持public或者protected的访问属性,这时应该怎么办? 使用using,去改变访问属性. #include < ...

  10. 利用ZYNQ SOC快速打开算法验证通路(4)——AXI DMA使用解析及环路测试

    一.AXI DMA介绍 本篇博文讲述AXI DMA的一些使用总结,硬件IP子系统搭建与SDK C代码封装参考米联客ZYNQ教程.若想让ZYNQ的PS与PL两部分高速数据传输,需要利用PS的HP(高性能 ...