VueX浏览器刷新如何实现保存数据
作者:MO0069 时间:2024-04-30 10:24:35
VueX浏览器刷新保存数据
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。
原因:
因为当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化
方法一
在 App.vue 的 created 钩子函数里写下了如下代码;
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
方法二
router/router.js 下
setItem()
刷新getItem()
刷新浏览器后,Vuex的数据丢失,如何解决?
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。
因为 store 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化。
解决方法
使用vuex-along
vuex-along 的实质是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中。
安装vuex-along
npm install vuex-along --save
配置 vuex-along: 在 store/index.js 中最后添加以下代码:
import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
? ? //modules: {
? ? ? ? //controler ?//模块化vuex
? ? //},
? ? plugins: [VueXAlong({
? ? ? ? name: 'store', ? ? //存放在localStroage或者sessionStroage 中的名字
? ? ? ? local: false, ? ? ?//是否存放在local中 ?false 不存放 如果存放按照下面session的配置
? ? ? ? session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
? ? })]
});
使用localStorage 或者 sessionStroage
created() {
? ? //在页面加载时读取sessionStorage里的状态信息
? ? if (sessionStorage.getItem("store")) {
? ? ? this.$store.replaceState(
? ? ? ? Object.assign(
? ? ? ? ? {},
? ? ? ? ? this.$store.state,
? ? ? ? ? JSON.parse(sessionStorage.getItem("store"))
? ? ? ? )
? ? ? );
? ? }
? ? //在页面刷新时将vuex里的信息保存到sessionStorage里
? ? window.addEventListener("beforeunload", () => {
? ? ? sessionStorage.setItem("store", JSON.stringify(this.$store.state));
? ? });
},
来源:https://blog.csdn.net/weixin_38069018/article/details/118363301
标签:VueX,浏览器,刷新,保存数据
0
投稿
猜你喜欢
Python txt文件如何转换成字典
2022-01-10 21:55:05
解决springboot yml配置 logging.level 报错问题
2021-09-21 21:38:02
Python中关键字is与==的区别简述
2022-07-09 10:32:09
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2021-03-09 23:06:58
对python3 Serial 串口助手的接收读取数据方法详解
2023-05-31 17:39:01
Anaconda的安装及其环境变量的配置详解
2022-08-31 19:21:11
安装2019Pycharm最新版本的教程详解
2023-06-25 23:27:54
XMLHTTP中setRequestHeader的参数问题
2008-09-30 10:48:00
js实现楼层效果的简单实例
2024-06-07 15:26:01
vue3封装侧导航文字骨架效果组件
2024-04-27 16:10:03
python使用pandas处理excel文件转为csv文件的方法示例
2021-09-13 07:15:52
Web 开发常用工具 大家自己查找下载
2022-09-20 23:58:30
基于Python预测一下世界杯最后赢家
2021-01-30 16:16:48
MySQL大库搭建主从的一种思路分享
2024-01-21 22:53:34
jupyter notebook使用argparse传入list参数
2022-12-25 16:54:03
python opencv旋转图像(保持图像不被裁减)
2022-02-09 13:56:32
SQL 合并多行记录的方法总汇
2024-01-18 23:38:24
JavaScript省市级联下拉菜单实例
2024-04-10 16:18:18
PHP xpath提取网页数据内容代码解析
2024-06-05 15:39:35
Python从数据库读取大量数据批量写入文件的方法
2024-01-27 14:48:10