vuex 页面刷新数据丢失问题及解决办法

问题原因

由于vuex中store里的数据是保存再内存里的，页面刷新会重新加载vue实例，store里数据会重置；

解决思路

• 将数据保存在浏览器缓存里（cookie、sessionstorage、localstorage）
• 页面刷新时再次请求数据
  • 监听浏览器的刷新时间，在刷新前把数据保存到sessionstorage，刷新后请求数据，请求到了用vuex，没有就用sessionstorage里的数据

解决办法

修改store文件下Index中state的定义

const store = new Vuex.Store({
    state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): 
	  ...
    }
})

App.vue中添加

mounted() {
            window.addEventListener('unload', this.saveState) // 监听页面重载
        },
        methods: {
            saveState() {
                sessionStorage.setItem('state', JSON.stringify(this.$store.state))
            }
        }