相思资源网 Design By www.200059.com
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管理状态 刷新页面保持不被清空的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无vuex管理状态 刷新页面保持不被清空的解决方案的评论...