VueX的持久化存储方案

519 阅读1分钟

什么是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。