vuex刷新数据消失后如何永久保存并避免再次发生？

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

前言：在Vue构建的单页大型项目中，可能会用到Vuex。Vuex的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，那么相应的组件也会高效地得到更新。

前言

vue构建的单页大型项目中，可能会用到Vuex 。Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

但是有一个问题就是：vuex的存储的数据只是在页面的中，相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。

比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？

解决思路：

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。

页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。

如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

sessionStorage和localStorage介绍

H5提供了我们常用的localStorage和sessionStorage。