当前位置:首页 > vue.js技术文章 > 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

如何运用sessionStorage解决vuex页面刷新后数据被清除的问题

  • 发布时间:
  • 作者:码农之家原创
  • 点击:111

这篇文章主要知识点是关于sessionStorage、vuex、页面刷新、数据清除、使用vuex解决刷新页面state数据消失的问题记录 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js前端开发:快速入门与专业应用

本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

查看详情

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

1.原因

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

2.解决方法

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度

我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化

3.具体实现

应用背景是用户登入后保存状态,退出后移除状态

mutations.js

ADD_LOGIN_USER (state,data) { //登入,保存状态 
 sessionStorage.setItem("username", data); //添加到sessionStorage 
 sessionStorage.setItem("isLogin",true); 
 state.username=data,  //同步的改变store中的状态 
 state.isLogin=true 
 }, 
 SIGN_OUT (state) { //退出,删除状态 
 sessionStorage.removeItem("username"); //移除sessionStorage 
 sessionStorage.removeItem("isLogin"); 
 state.username=''  //同步的改变story中的状态 
 state.isLogin=false 
 } 

getters.js

isLogin (state) { 
 if (!state.isLogin) { 
  state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 
  state.username=sessionStorage.getItem('username'); 
 } 
 return state.username 
 } 

总体的实现思路是让vuex中story的状态和sessionStorage保持一致(从sessionStorage取值)

4.后话

之前踩了一个大坑,没注意到vuex可以让组件响应式变化,让组件直接取了sessionStorage的值,弄的我还必须刷新才能看到退出后的效果。

补充:

下面看戏vuex存储和本地存储(localstorage、sessionstorage)的区别

1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地

2.应用场景:vuex用于组件之间的传值,localstorage则主要用于不同页面之间的传值。

3.永久性:当刷新页面时vuex存储的值会丢失,localstorage不会。

注:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage无法做到,原因就是区别1。

总结

以上所述是小编给大家介绍的vuex在页面刷新后数据被清除问题的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

使用vuex解决刷新页面state数据消失的问题记录

在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。

因子:

  • Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。
  • Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。

言而总之:

实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该如何解决?

解决思路:将state中的数据放在浏览器sessionStorage和localStorage

解决办法:

存储到localStorage

通过监听页面的刷新操作,即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息
在App.vue中加入下面代码

created(){
 //在页面刷新时将vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
   localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
  })
  
 //在页面加载时读取localStorage里的状态信息
  localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
 }

使用vuex-persistedstate 插件

安装插件:npm install vuex-persistedstate --save

配置:

在store的index.js中,手动引入插件并配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState()]
})

该插件默认持久化所有state,当然也可以指定需要持久化的state:

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(data) {
   return {
   // 设置只储存state中的myData
   myData: data.myData
  }
  }
 })]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue项目刷新当前页面的方、 vue中post请求以a=a&b=b的、 Vue中props的用法知识点、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue打包后生成一个配置文件修改接口的实例内容

下一篇:如何解决vue props传值失败后输出undefined的问题

展开 +

收起 -

vuex页面刷新数据清除 学习笔记
网友NO.939389

vue+vuex+axios+echarts画一个动态更新的中国地图的方法

本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-clinpm install vue-cli -g# 初始化项目vue init webpack china-map# 切到目录下cd china-map# 安装项目依赖npm install# 安装 vuexnpm install vuex --save# 安装 axiosnpm install axios --save# 安装 EChartsnpm install echarts --save 二. 项目结构 ├── index.html├── main.js├── components│ └── index.vue└── store ├── index.js # 组装模块及导出store的文件 └── modules └── ChinaMap.js # 中国地图Vuex模块 三. 引入中国地图并绘制基本的图表 1.按需求引入与中国地图相关的Echarts图表和组件。 // 主模块let echarts = require('echarts/lib/echarts')// 散点图require('echarts/lib/chart/scatter')// 散点图放大require('echarts/lib/chart/effectScatter')// 地图require('echarts/lib/chart/map')// 图例require('echarts/lib/compo……

网友NO.190603

vue--vuex详解

Vuex 什么是Vuex? 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解:Vuex是用来管理组件之间通信的一个插件 为什么要用Vuex? 我们知道组件之间是独立的,组件之间想要实现通信,我目前知道的就只有props选项,但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢?嗯..,方法应该有。抛开怎么实现的问题,试想一下,当做中大型项目时,面对一大堆组件之间的通信,还有一大堆的逻辑代码,会不会很抓狂??那为何不把组件之间共享的数据给“拎”出来,在一定的规则下管理这些数据呢? 这就是Vuex的基本思想了。 Vuex有什么特性? 怎么使用Vuex? 引入Vuex.js文件 创建实例: !DOCTYPE htmlhtml lang="en"he……

网友NO.728212

使用vuex解决刷新页面state数据消失的问题记录

在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。 因子: Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。 Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。 言而总之: 实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该如何解决? 解决思路:将state中的数据放在浏览器sessionStorage和localStorage 解决办法: 存储到localStorage 通过监听页面的刷新操作,即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息 在App.vue中加入下面代码 created(){ //在页面刷新时将vuex里的信息保存到localStorage里 window.addEventL……

网友NO.266975

Vuex 使用及简单实例(计数器)

前一段时间因为需要使用vue,特地去学习了一下。但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程。 什么是Vuex? vuex是专门为vue.js应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理。 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1、利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。 npm install vuex --save 要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。 2、新建一个store文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。 import Vue from 'vue';import Vuex from 'vuex'; 3、使用我们vuex,引入之后用Vue.use进行引用。 Vue.use(Vuex……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757