关于前端:Vuejs解决vuex中的数据刷新丢失的问题

咱们在应用 vue 开发我的项目时，通常会应用到其专门的状态管理工具——vuex。然而 vuex 中的 store 中的数据有一个个性，就是在页面刷新的时候，会从新加载 vue 实例，store 外面的数据就会被从新赋值，这样就会导致数据失落的问题。

为此咱们能够通过 js 存储技术解决，这里应用 sessionStorage 较为适合。为什么 sessionStorage 适合，是因为 sessionStroage 的存在工夫时以后页面关上的时候，页面一旦敞开，立刻生效。下次关上页面再进来时，仍是新数据，不是上次存储的数据了。

    // 在页面加载时读取 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))
    })