解决vuex刷新数据消失问题


Posted in Javascript onNovember 12, 2020

前言

vue构建的单页大型项目中,可能会用到Vuex 。Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

但是有一个问题就是:vuex的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。

比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加?

解决思路:

监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。

页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。

如果不存在,说明是第一次打开,则取vuex中定义的state初始值。

sessionStorage和localStorage介绍

H5提供了我们常用的localStorage和sessionStorage。

两者的区别:localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。

存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行)

解决vuex刷新数据消失问题

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem、removeItem、clear等。

代码:

项目目录结构:

解决vuex刷新数据消失问题

在项目的入口页面(App.vue)里添加监听刷新事件:

name: 'App',
 mounted () {
 window.addEventListener('unload', this.saveState)
 },
 methods: {
 saveState () {
  sessionStorage.setItem('state', JSON.stringify(this.$store.state))
 }
 }

store里有可能存储了一些涉密的信息,所以一直在 sessionStorage放着不是太好,页面加载完成后,清空或者删除指定的session。

window.addEventListener("load", () => {
  sessionStorage.clear();
 });

state.js:

var state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
 count: 1,
 obj: {},
 arr: [1, 2, 3]
}
export default state

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './states'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions
})

mutations.js:

import {
 SOME_MUTATION
} from './mutation-types.js'
 
export default {
 [SOME_MUTATION] (state) {
 state.count++
 }
}

mutation-types.js

export const SOME_MUTATION = 'SOME_MUTATION'

补充知识:vuex-along有效防止刷新页面后vuex中的数据重置

1.vuex-along安装

npm i vuex-along --save

2.在store目录下的index.js文件中引入

2.1

import {createVuexAlong} from 'vuex-along'

2.2直接上图

解决vuex刷新数据消失问题

简单说明其中的含义:

name:“”“”

//在这块我存入的是localstorage,代表localstorage的键值

local:{list:["userInfo"],isFilter:true}

//list:要过滤的vuex中的数据,isFilter代表将userInfo滤过,其余存进localstorage

session:false

//对于sessionstorage不进行任何操作

更加详细信息借助github进行了解:https://github.com/boenfu/vuex-along

3.以上这篇解决vuex刷新数据消失问题就是小编分享给大家的全部内容了,希望对各位将来的大佬有所帮助!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
Javascript的&&和||的另类用法
Jul 23 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 #Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 #Javascript
javascript实现搜索筛选功能实例代码
Nov 12 #Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 #Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 #Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 #Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 #Javascript
You might like
PHP JSON 数据解析代码
2010/05/26 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
JS数组去重的6种方法完整实例
2018/12/08 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
数据库面试要点基本概念
2013/10/31 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
经贸专业毕业生求职信
2014/03/23 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
先进集体申报材料
2014/12/25 职场文书
基层工作经历证明
2015/06/19 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA