在默认模式下,vuex中保存的东西会在刷新之后被清空,导致我们想用vuex存储一些状态,比如登录状态,都会受到很大的影响
解决问题的办法
第一步
在vue的store文件夹中,修改index.js改变正常的vuex定义state的方法
const store = new Vuex.Store({
// 在state与保存的数据之间添加一个三目运算
state: sessionStorage.getItem('state') ?
JSON.parse(sessionStorage.getItem('state')) : {
ordergoods: {}
}
还需要在vue的app.vue文件中作出这样的更改
mounted: function () {
window.addEventListener('unload', this.saveState)
},
methods: {
saveState () {
sessionStorage.setItem('state', JSON.stringify(this.$store.state))
}
}
监听unload事件,该方法将会在页面被刷新的时候执行。
如果重载页面就把state存入sessionStorage,然后在需要state的时候从sessionStorage中取值。