和女上司单独被困电梯,出来后她居然告诉了我Vuex页面刷新数据丢失问题解决办法

简介: 和女上司单独被困电梯,出来后她居然告诉了我Vuex页面刷新数据丢失问题解决办法

在store文件创建一个文件然后里面创建一个Search.js,放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被清空。防止vuex中的数据丢失保存到浏览器缓存中localStorage这样不管浏览器怎么刷新也不会

 state: {
   
    protocolId: JSON.parse(localStorage.getItem('protocolId')) || '',

  },
 mutations: {
   
    SearchDetails(state, data) {
   
      state.protocolId= data
      localStorage.setItem('protocolId', JSON.stringify(data))
    },

在vue页面调用接口存值

 this.$store.commit('down/Search', res.data.result.protocolId)

在vue页面去除vuex里面存的数据

 this.$store.state.dropdown.protocolId
相关文章
|
8月前
|
Ubuntu
在Ubuntu 20.04 x64系统中增加中文支持
将 Ubuntu 系统语言设置为中文: 1. 更新系统语言包: `sudo apt update` 和 `sudo apt install language-pack-zh-hans`。 2. 修改区域设置:编辑 `/etc/default/locale` 文件,设置 `LANG=zh_CN.UTF-8` 和 `LANGUAGE=zh_CN:zh`。 3. 生成中文 locale: `sudo locale-gen zh_CN.UTF-8` 和 `sudo update-locale`。 4. 重启系统: `sudo reboot`。 5. 验证设置: `locale` 命令检查是否生效。
621 1
|
缓存 JSON 前端开发
超详细讲解:http强缓存和协商缓存
超详细讲解:http强缓存和协商缓存
|
缓存 UED
强缓存与协商缓存
强缓存与协商缓存
420 63
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
259 3
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
641 1
|
JavaScript
Vue3骨架屏(Skeleton)
该文章介绍了一个名为Skeleton的Vue组件,用于创建加载时的占位符界面,包含多种可配置项如按钮、输入框、图像等,并支持动画效果。
354 0
Vue3骨架屏(Skeleton)
|
监控 Linux
cento如何查看网口
【6月更文挑战第29天】cento如何查看网口
728 6
|
存储 JavaScript 前端开发
作为前端开发,你了解MutationObserver吗?
作为前端开发,你了解MutationObserver吗?
379 0
|
前端开发 JavaScript
深入理解JavaScript的事件循环(Event Loop)
深入理解JavaScript的事件循环(Event Loop)
【Hexo】butterfly主题添加备案信息
【Hexo】butterfly主题添加备案信息
【Hexo】butterfly主题添加备案信息