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

}

})]

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

vuex页面数据丢失_使用vuex解决刷新页面state数据消失的问题记录相关推荐

vuex页面数据丢失_解决 vuex 中的数据在页面刷新之后就丢失的问题
在vue的项目中我们一般都会使用到vuex,在vuex中我们会保存一个需要全局使用的变量或者状态,这样方便我们使用.但是vuex的store中的数据有一个特性,那就是在页面刷新时,页面会重新加载vue ...
#{}不自动改参数类型_如何在不刷新页面的情况下改变URL
本文为饥人谷原创文章,首发于前端学习指南. 问没有具体业务场景的技术问题都是耍流氓,那在回答这个问题之前先简单介绍一下业务场景. 下午6点半,小 H写了一个下午的代码揉揉眼睛伸个懒腰,「今天终于能早 ...
微信小程序页面栈_微信小程序使用页面栈改变上一页面的数据
微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...
基于angularjs的单页面实例_基于AngularJs的单页面程序
基于AngularJs的单页面程序在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...
微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
解决刷新页面vuex数据获取不到的问题
现象: 一进入页面可以在mounted中获取到vuex中的数据, mounted() {console.log('
nginx配置 vue打包后的项目解决刷新页面404问题|nginx配置多端访问
访问vue页面时,/# 使url看着不美观,使用 H5 history模式可以完美解决这个问题,但需要后端nginx帮助.接下来我们自己配置一下. 使用前端路由,但切换新路由时,想要滚动到页面顶部,或 ...
实现页面适配_微信公众号文章页面适配深色模式
最近安卓微信7.0.10正式版发布,更新过后,很多用户发现,之前在测试版中对系统深色模式的适配功能被取消了,小伙伴们对此很是不满,好在Android 10系统手机用户占比很少,影响范围还不是很大,并且 ...
php 判断用户是否刷新,如何在php和ajax中创建一个注册页面，它会在不刷新页面的情况下检查某个用户名是否已经存在？ - php...
我有一个register.php文件,它为我的网站创建了新用户.但是,如果某人使用已经存在的用户名,则仅当他输入整个表单并提交时才会生成错误.如何实现Ajax / Jquery以在不提交表单的情况下显 ...

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

vuex页面数据丢失_使用vuex解决刷新页面state数据消失的问题记录相关推荐

最新文章

热门文章