vuex管理状态刷新页面保持不被清空的解决方案

210 阅读 0 评论 139 点赞

我是靠谱客的博主乐观煎蛋，最近开发中收集的这篇文章主要介绍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管理状态刷新页面保持不被清空的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。