vuex页面刷新数据丢失的解决办法

•  

vuex页面刷新数据丢失的解决办法

在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。

原因：

因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化

解决思路：

将state的数据保存在localstorage、sessionstorage或cookie中（三者的区别），这样即可保证页面刷新数据不丢失且易于读取。

1. localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
2. sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
3. cookie:cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。

由于vue是单页面应用，操作都是在一个页面跳转路由，因此sessionStorage较为合适,原因如下：

1. sessionStorage可以保证打开页面时sessionStorage的数据为空；
2. 每次打开页面localStorage存储着上一次打开页面的数据，因此需要清空之前的数据。

vuex中state数据的修改必须通过mutation方法进行修改，因此mutation修改state的同时需要修改sessionstorage,问题倒是可以解决但是感觉很麻烦，state中有很多数据，很多mutation修改state就要很多次sessionstorage进行修改，既然如此直接用sessionstorage解决不就行了，为何还要用vuex多此一举呢？
vuex的数据在每次页面刷新时丢失，是否可以在页面刷新前再将数据存储到sessionstorage中呢，是可以的，beforeunload事件可以在页面刷新前触发，但是在每个页面中监听beforeunload事件感觉也不太合适，那么最好的监听该事件的地方就在app.vue中。

1. 在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
2. 在beforeunload方法中将store.state存储到sessionstorage中。

代码如下：

export default {
name: 'App',
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}

//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}

分类: vue

 

另一篇：

在实际的vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。

因子：

• Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
• Vuex劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

言而总之：

实际问题：在vue项目中，使用Vuex做状态管理时，调试页面时，刷新后state上的数据消失了，该如何解决？

解决思路：将state中的数据放在浏览器sessionStorage和localStorage

 

解决办法：

存储到localStorage

通过监听页面的刷新操作，即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息
在App.vue中加入下面代码

 

1 2 3 4 5 6 7 8 9

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中，手动引入插件并配置

?

1 2 3 4 5

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

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

 

1 2 3 4 5 6 7 8 9 10 11 12

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。