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

相信有很多小伙伴在使用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去实现相同的功能。