使用vuex解决刷新页面state数据消失的问题记录
更新时间：2019年05月08日 14:30:03 作者：D阿伟
这篇文章主要介绍了使用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
}
}
})]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
WebStorm是一个非常适合学习和开发Vue项目的集成开发环境,下面这篇文章主要给大家介绍了关于利用WebStorm创建一个Vue项目的完整步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vant list组件滚动保留滚动条位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了解决修改el-pagination显示文字的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决(两种解决方法)
这篇文章主要介绍了vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决，本文给大家分享两种解决方法,需要的朋友可以参考下2023-05-05
下面小编就为大家分享一篇完美解决iview 的select下拉框选项错位的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue2.0学习系列之项目上线的方法步骤(图文)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue SPA首屏加载缓慢问题解决方案，首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容2023-03-03
这篇文章主要介绍了vue-autoui自匹配webapi的UI控件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
在本篇文章里小编给大家整理的是一篇关于vue3组件通信的方式总结及实例用法，对此有兴趣的朋友们可以跟着学习下。2021-12-12
Vue3使用ref与reactive创建响应式对象的示例代码
这篇文章主要详细介绍了Vue3使用ref与reactive创建响应式对象的方法步骤,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-02-02
最新评论