使用vue 刷新页面后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中的myDatamyData: data.myData}}})]

使用vue 刷新页面后state数据被清空的问题（刷新总是跳转到登陆页面）相关推荐

html session 登录页面跳转页面跳转页面,session失效后跳转到登陆页面
一.编写Filter拦截器类 package com.pv.utils; import java.io.IOException; import java.io.PrintWriter; import ...
织梦ajax登录界面,dede织梦后台登陆成功后又跳转到登陆页面
dede织梦后台登陆成功后又跳转到登陆页面怎么办?相信在很多个人站长朋友们在dede建站运营中都有遇到过类似的问题,在登陆界面输入账号密码后会有3-5秒的卡顿才会进入下面的页面,然后再卡顿3-5秒就跳 ...
通过cookies跳过验证码登陆页面，直接访问网站的其它URL
我每次手动访问去NN网的一家酒店,就不需要登陆,一旦我用脚本打开就会让我登陆,而登陆页面又有验证码,不想识别验证码,所以就想:"通过cookies跳过验证码登陆页面,直接访问网站的其它URL ...
js layui跳转页面_【WEB前端开辟】layui的iframe跳转链接与页面按钮跳转相干引见...
一.导航跳转iframe页面题目: 引荐:layui教程关于layui的iframe嵌套页面的导航跳转页面题目,如下图所示能够看到结果: 在模板页的导航代码: 一切商品商品列表商品属性商品分类 ...
linux shell 刷新,Linux在shell终端中清空DNS缓存,刷新DNS的方法
现在很多Linux发行版都没有内置DNS本地缓存,Linux不像Windows那样可以使用ipconfig /flushdns来刷新,在Linux下无需刷新,因为本身没有缓存. 前言在Linux系统 ...
uniapp 拦截器-未登录跳转到登陆页面
uniapp实现未登陆拦截效果: 拦截器前加了拦截器后建一个interceptor.js //页面白名单const whiteList = ['/user-pages/bindPhone',]f ...
React配合axios请求拦截校验session，403跳转至登陆页面
这个在Vue中很简单的就解决了,直接引入router,然后router.push,但是在React中,我们要使用props.history.push进行跳转(不使用window.location.hr ...
Laravel5.5重写实现未通过认证(多用户)跳转相应登陆页面
打开appExceptionsHandler.php文件,重写unauthenticated方法: /*** 重写实现未认证用户跳转至相应登陆页* @param \Illuminate\Http\Re ...
session过期跳转到登陆页面并跳出iframe框架的最简单方法
为什么80%的码农都做不了架构师?>>> <script>if (window.top !== window.self) {window.top.location ...

使用vue 刷新页面后state数据被清空的问题（刷新总是跳转到登陆页面）

使用vue 刷新页面后state数据被清空的问题（刷新总是跳转到登陆页面）相关推荐

最新文章

热门文章