vuex管理状态 刷新页面保持不被清空的解决方案
更新时间：2019年11月11日 19:29:22 作者：WwangXue
今天小编就为大家分享一篇vuex管理状态 刷新页面保持不被清空的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mutation文件
import {
RECEIVE_PUBLICHTIT
} from './mutation-types'
//保证刷新页面数据不消失*
function storeLocalStore (state) {
window.localStorage.setItem("publicTit",JSON.stringify(state));
}
export default {
[RECEIVE_PUBLICHTIT] (state,{title}){
state.publicTit = title
storeLocalStore(state)
}
}
用到publicTit属性的组件
created(){
localStorage.getItem("publicTit")&&
this.$store.replaceState(JSON.parse(localStorage.getItem("publicTit")))
},
在created()生命周期中进行取值操作，这时需要判断第一次加载项目的时，localStorage没有publicTit的信息，所以先判断一下
实现思路 让vuex中publicTit的状态和localStorage中保持一致（从localStorage中取值）
优化版：
需要调用属性的组件
created(){
//在页面加载时读取localStorage状态 复制对象是解决新vuex管理的状态中新添加的字段也可以存入localStorage中
localStorage.getItem("publicTit") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("publicTit"))));
//在页面刷新时将vuex里的信息保存到localStorage里，避免多次调用localStorage进行存储降低性能,beforeunload是在页面刷新之前调用
window.addEventListener("beforeunload",()=>{
localStorage.setItem("publicTit",JSON.stringify(this.$store.state))
})
}
以上这篇vuex管理状态 刷新页面保持不被清空的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持，这篇文章主要介绍了关于vue-treeselect的基本用法,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue跳转同一路由报错的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了VUEJS实战之构建基础并渲染出列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo
这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
这篇文章主要介绍了vue实现数字+英文字母组合键盘功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
今天通过本文给大家分享Vue.use是什么，主要包括vueEsign 插件的install是什么，element-ui的install是什么，为什么有的库就不需要使用Vue.use，对vue.use()相关知识感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了vue2.0之监听属性的使用心得及搭配计算属性的使用,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了vue实现换肤功能，一套深色，一套浅色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了Vue-Cli项目优化操作,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
element-plus中el-upload组件限制上传文件类型的方法
Element Plus 中,el-upload 组件可以通过设置 accept 属性来限制上传文件的格式,这篇文章主要介绍了element-plus中el-upload组件限制上传文件类型,需要的朋友可以参考下2024-02-02
最新评论