位置:首页 > web前端 > vue

使用vuex时如何解决浏览器刷新导致数据丢失的问题

dearweb 发布:2021-10-23 14:16:23阅读:

相信有很多小伙伴在使用vuex的时候会遇到刷新浏览器丢失数据的问题,本文主要针对这个问题提出了解决方案,希望可以帮助到给为小伙伴

vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中。

操作

打开App.vue,在 created() 加入:

从浏览器缓存中取出全局变量的值            

this.store.dispatch("setName", localStorage.getItem("name"));

 关闭/刷新之前,将vuex中全局变量存入浏览器缓存中            

window.addEventListener("beforeunload", () => {
    localStorage.setItem("name", this.store.getters.getName);
});

拓展

如果项目中不需要vuex来监听参数的变化的话,可以舍弃vuex,直接存入浏览器localStorage

存入浏览器

localStorage.setItem("name", name);

从浏览器取出

localStorage.getItem("name")

上面的方法总结一下

通过监听页面的刷新操作,即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息

created(){
 //在页面刷新时将vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
   localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
  })
  
 //在页面加载时读取localStorage里的状态信息
  localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
 }

使用vuex-persistedstate 插件

安装插件

npm install vuex-persistedstate --save

在store的index.js中,手动引入插件并配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState()]
})

该插件默认持久化所有state,当然也可以指定需要持久化的state:

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(data) {
   return {
   // 设置只储存state中的myData
   myData: data.myData
  }
  }
 })]

以上就是关于将状态结合浏览器存储localstorage的方式防止数据的丢失,此外你也可以结合cookie去实现相同的功能。

24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看