阅读 2652

Vuex实现数据持久化,解决浏览器刷新数据丢失问题

vuex的 store 中的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被重新赋值,这样就会出现页面刷新vuex中的数据丢失的问题。 如何解决浏览器刷新数据丢失问题呢?

方法一:全局监听,页面刷新的时候将 store 里 state 的值存到 sessionStorage 中,然后从sessionStorage 中获取,再赋值给 store ,并移除 sessionStorage 中的数据。在 app.vue 中添加以下代码:
 created() {
    window.addEventListener('beforeunload',()=>{
       sessionStorage.setItem('list'JSON.stringify(this.$store.state))
    })
    
    try{
      sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('list'))))
    }catch(err) {
      console.log(err);
    }
  
    sessionStorage.removeItem("list");
  }
复制代码

注意!!! storage 只能存储字符串的数据,对于 JS 中常用的数组或对象不能直接存储。但我们可以通过JSON 对象提供的 parse 和 stringify 方法将其他数据类型转化成字符串,再存储到storage中就可以了。

方法二:安装 vuex-persistedstate 插件
1. npm install vuex-persistedstate -S //安装插件
2. 在 store/index.js 文件中添加以下代码:
import persistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
 state:{},
 getters:{},
 ...
 plugins: [persistedState()] //添加插件
})
复制代码

注意!!! vuex-persistedstate 默认使用 localStorage 来存储数据,若要实现无痕浏览该如何实现呢?

这时候就需要使用 sessionStorage 进行存储,修改 plugins 中的代码

plugins: [
    persistedState({ storage: window.sessionStorage })
]
复制代码
文章分类
前端
文章标签