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))
        })
      }