解决vue刷新页面以后丢失store的数据

刷新页面时vue实例重新加载，store就会被重置，可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。根据我的需求，最合适的是sessionStorage。
beforeunload在页面刷新时触发，可以监听这个方法，让页面在刷新前存store到sessionStorage中。
当然，在页面刷新时还要读取sessionStorage中的数据到store中，读取和储存都写在app.vue中。

export default {

  name: 'app',

  created () {

    // 在页面加载时读取sessionStorage

    if (sessionStorage.getItem('store')) {

      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))

    }

    // 在页面刷新时将store保存到sessionStorage里

    window.addEventListener('beforeunload', () => {

      sessionStorage.setItem('store', JSON.stringify(this.$store.state))

    })

  }

}

巴特西

解决vue刷新页面以后丢失store的数据

最新文章

热门文章