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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
Bootstrap响应式表格详解
May 23 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
Linux的文件类型
2016/07/05 面试题
简短的公司员工自我评价分享
2013/11/13 职场文书
法务专员岗位职责
2014/01/02 职场文书
对教师的评语
2014/04/28 职场文书
4s店活动策划方案
2014/08/25 职场文书
医院领导班子整改方案
2014/10/01 职场文书
初三毕业评语
2014/12/26 职场文书
简历中自我评价范文
2015/03/11 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Spring整合Mybatis的全过程
2021/06/28 Java/Android
详细了解MVC+proxy
2021/07/09 Java/Android
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
python语言中pandas字符串分割str.split()函数
2022/08/05 Python