前端页面刷新后避免Vuex状态丢失

第一步

监听Vue.created事件，并添加beforeunload事件，在浏览器刷新前，保存状态至sessionStorage中

export default {
  name: 'app',
  created () {
  	// 监听beforeunload事件
    window.addEventListener('beforeunload', () => {
      //  在页面卸载是保存状态至sessionStorage
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

第二步

在初始化Vuex.store时，有选择的加载state

const state = sessionStorage.getItem('store')
  ? JSON.parse(sessionStorage.getItem('store'))
  : {
    index: 0
  }
 
export default new Vuex.Store({
  state,
  mutations: {
    ADD_INDEX: (state) => { state.index += state.index }
  },
  actions: {
  }
})

第三步

happy codding