在默認模式下,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中取值。