vuex页面刷新数据丢失的解决办法

使用sessionStorage

1、单条目

const state = {
  authInfo: JSON.parse(sessionStorage.getItem("COMPANY_AUTH_INFO")) || {}
}

const getters = {
  authInfo: state => state.authInfo,
}
const mutations = {
  SET_COMPANY_AUTH_INFO(state, data) {
    state.authInfo = data
    sessionStorage.setItem("COMPANY_AUTH_INFO", JSON.stringify(data))
  }
}

//actions 模块里无需使用 sessionStorage

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  //actions,
}

2、整个store替换

export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}

3、指定多个条目

export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
            const { app: { hotel, data} = {} } = JSON.parse(sessionStorage.getItem('store') || '{}');
            this.$store.replaceState({ app: Object.assign({}, this.$store.state.app, { hotel, data}) })
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}

4、注意点：

JSON.stringify会把function数据干掉，注意JSON.stringify后导致部分数据丢失的问题

企业微信截图_16763611487648.png