如何避免Vue页面刷新时数据丢失问题？

本文共计545个文字，预计阅读时间需要3分钟。

在Vue项目中，有时在刷新5页面时数据会丢失。这通常是因为使用Vuex进行全局状态管理时，store中的数据未被正确保存。

在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：

解决方法一：

最先想到的应该就是利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存，下面是利用localStorage存储的具体方案：

方案一：由于state中的数据是响应式的，而数据又是通过mutation来进行修改，故在通过mutation修改state中数据的同时调用localStorage.setItem()方法来进行数据的存储。