解决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 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
基于JSON数据格式详解
Aug 31 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
JS如何实现动态添加的元素绑定事件
Nov 12 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中error与exception的区别及应用
2014/07/28 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
介绍一下write命令
2014/08/10 面试题
《我要的是葫芦》教学反思
2014/02/23 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电