Vuex持久化插件（vuex-persistedstate）如何防止刷新后数据丢失问题？

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

页面刷新后，想要保存页面未保存的数据。我们通常习惯于将数据保存在浏览器的sessionStorage或localStorage中。但使用Vue后，vuex提供了更方便的应用方式。

vuex优势：- 相比sessionStorage，存储数据更安全。- se

页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

1.手动利用HTML5的本地存储

方法

• vuex的state在localStorage或sessionStorage或其它存储方式中取值
• 在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。这样state就会和存储一起存在并且与vuex同步

问题

最直观的就是，手动写比较麻烦。