vuex管理状态 刷新页面保持不被清空的解决方案


Posted in Javascript onNovember 11, 2019

mutation文件

import {
 RECEIVE_PUBLICHTIT
} from './mutation-types'
 
//保证刷新页面数据不消失*
function storeLocalStore (state) {
 window.localStorage.setItem("publicTit",JSON.stringify(state));
}
 
export default {
 [RECEIVE_PUBLICHTIT] (state,{title}){
  state.publicTit = title
  storeLocalStore(state)
 }
}

用到publicTit属性的组件

created(){
     localStorage.getItem("publicTit")&&
this.$store.replaceState(JSON.parse(localStorage.getItem("publicTit")))
   },

在created()生命周期中进行取值操作,这时需要判断第一次加载项目的时,localStorage没有publicTit的信息,所以先判断一下

实现思路 让vuex中publicTit的状态和localStorage中保持一致(从localStorage中取值)

优化版:

需要调用属性的组件

created(){
    //在页面加载时读取localStorage状态 复制对象是解决新vuex管理的状态中新添加的字段也可以存入localStorage中
    localStorage.getItem("publicTit") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("publicTit"))));
 
    //在页面刷新时将vuex里的信息保存到localStorage里,避免多次调用localStorage进行存储降低性能,beforeunload是在页面刷新之前调用
    window.addEventListener("beforeunload",()=>{
     localStorage.setItem("publicTit",JSON.stringify(this.$store.state))
    })
   }

以上这篇vuex管理状态 刷新页面保持不被清空的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
js切换div css注意的细节
Dec 10 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
原生js实现分页效果
Sep 23 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
vuex实现数据状态持久化
Nov 11 #Javascript
vue 更改连接后台的api示例
Nov 11 #Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 #Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 #Javascript
vuex存储token示例
Nov 11 #Javascript
Vuex实现数据增加和删除功能
Nov 11 #Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 #Javascript
You might like
PHP环境搭建最新方法
2006/09/05 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
pandas中Timestamp类用法详解
2017/12/11 Python
python构建深度神经网络(DNN)
2018/03/10 Python
基于python绘制科赫雪花
2018/06/22 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
Android Studio 计算器开发
2022/05/20 Java/Android