vuex与浏览器缓存的区别

Posted 2023-04-11

参考技术A

vuex ：关闭标签页后会随之销毁
LocalStorage ：保存直到到自定义的时间结束，不设置过期时间则永久保存
SectionStorage ：保存时间为当前会话，与 vuex 相似关闭标签页后自动销毁

vuex ：存储在内存当中
storage ：存储在本地文件

vuex ：用于各组件公共状态的管理，因为是是响应式的所以 vuex 更方便快捷，虽然 storage 也可以实现但是需要通过 $on 和 $emit 的形式去触发响应，而且storage是以字符串的形式保存的还需要 JSON.parse() 和 JSON.stringify() 去读写
storage ：可以用于在刷新页面 vuex 数据初始化的问题，因为在页面刷新的时候 vuex 会重新加载数据会初始化，可以在设置 vuex 的同时设置 storage 当刷新页面时如果 vuex 被初始化拿不到数据时可以使用缓存中记录的数据

Vue 之 vuex 解决刷新页面 state 数据丢失的问题

  vue项目在使用 vuex 时都会存在一个问题，那就是当浏览器刷新时会清除 vuex 缓存的 state 数据，而偶尔可能会碰到某种需求需要实现在刷新浏览器时不清除vuex缓存的数据，那么该如何实现呢？
  这个时候我们就需要利用到浏览器的会话缓存 sessionStorage 来实现，具体实现代码如下：

• 在 App.vue 中增加监听刷新事件：

export default 
    name: "App",
    mounted() 
        window.addEventListener("unload", this.savaState);
    ,
    methods: 
        savaState() 
            sessionStorage.setItem("state", JSON.stringify(this.$store.state));
        
    

• 然后在相应的 vuex 中的 state 属性中：

let stateStorage = sessionStorage.getItem("state");

const state = stateStorage ? JSON.parse(stateStorage) : 
    userInfo: 
        userName: ''
    

  
  

如有不足，望大家多多指点！ 谢谢！