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 17 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
three.js实现3D模型展示的示例代码
Dec 31 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
python制作企业邮箱的爆破脚本
2016/10/05 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
某公司面试题
2012/03/05 面试题
自我鉴定范文300字
2013/10/01 职场文书
会议开场欢迎词
2014/01/15 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
教师个人鉴定材料
2014/02/08 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
销售督导岗位职责
2015/04/10 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL