什么是VueX
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
作为前端存储的解决方案,其与localStorage和sessionStorage的区别
- VueX存储在内存中,
刷新页面
(清除内存)VueX值丢失。 - sessionStorage在页面关闭后清除,localStorage永久保存,手动清清除。
- VueX用于组件间传值,loaclStorage/sessionStorage用于页面间传值。
VueX的持久化存储方案
因为在刷新页面后VueX中存储的值会消失,所以需要持久化存储方案。
关键技术:
- 使用sessionStorage在每次刷新时将数据保存在sessionStorage中
- 监听页面window的unload事件(页面重载事件)
代码实现
mounted:{
window.addEventListener("unload",this.saveState)
}
methods:{
saveState(){
sessionStorage.setItem('state',JSON.stringify(this.$store.state))
}
}
const store = new Vuex.store({
state:sessionStorage.getItem("state") ? JSON.parse(sessionStorage.getItem("state")) : {
//初始化一个state
}
})
首先在mounted生命周期函数中注册监听器,在页面卸载时调用saveState函数,将state保存在sessionStorage中。在重新载入时查看sessionStorage中是否存在state,存在则加载state,不存在则初始化一个state。