如何让Vuex持久化插件在刷新后仍保留数据，实现数据不消失的神奇效果？

本文共计868个文字，预计阅读时间需要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同步

问题

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