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 目录列举函数
Nov 06 Javascript
用jQuery简化JavaScript开发分析
Feb 19 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 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 IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP new static 和 new self详解
2017/02/19 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
jquery 插件开发备注
2010/08/27 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
详解Vue源码中一些util函数
2019/04/24 Javascript
JS实现小星星特效
2019/12/24 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
外贸采购员岗位职责
2014/03/08 职场文书
学生党员公开承诺书
2014/05/28 职场文书
婚礼答谢词
2015/01/04 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Golang中channel的原理解读(推荐)
2021/10/16 Golang