解决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 parseInt与Number函数的区别
Jan 21 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP自定义错误用法示例
2016/09/28 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
php实现算术验证码功能
2018/12/05 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
js获取内联样式的方法
2015/01/27 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
详解Vue之计算属性
2020/06/20 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python Trie树实现字典排序
2014/03/28 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
基于python实现FTP文件上传与下载操作(ftp&sftp协议)
2020/04/01 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
新农村建设典型材料
2014/05/31 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
财产分割协议书
2016/03/22 职场文书
使用pytorch实现线性回归
2021/04/11 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
SQL基础的查询语句
2021/11/11 MySQL