解决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计算文本框还能输入多少个字符
Jul 29 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
原生js二级联动效果
Jun 20 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
微信小程序对图片进行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+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
js实现简单的倒计时
2021/01/28 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python3 socket同步通信简单示例
2017/06/07 Python
Python中表示字符串的三种方法
2017/09/06 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
JSF的标签库有哪些
2012/04/27 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
学校介绍信范文
2014/01/14 职场文书
水利学院求职自荐书
2014/02/01 职场文书
上班玩手机检讨书
2014/02/17 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
学风建设演讲稿
2014/09/12 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
python和anaconda的区别
2022/05/06 Python