vue如何在页面刷新时保留状态信息

1、通过本地存储 state中的数据，页面刷新成功后再次从本地存储中读取state数据

//  vuex中的数据发生改变时触发localStorage的存储操作
localstorage.setItem('state', JSON.stringify(this.$store.state))

//  页面加载的时候在created中获取本地存储中的数据
localStorage.getItem('state') && this.$store.replaceState(JSON.parse(localStorage.getItem('state')));

注意：该操作会频繁的触发localStorage的存取工作

2、 监听页面刷新，触发存取操作

首先在入口组件App.vue中的created中利用localstorage或者sessionStorage来存取state中的数据

//   在页面加载时读取sessionStorage里的状态信息

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

//   页面刷新时将state数据存储到sessionStorage中

window.addEventListener('beforeunload',()=>{
  sessionStorage.setItem('state',JSON.stringify(this.$store.state) )
})

注意：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象