Vuex刷新state数据消失怎么办？

一、问题描述

在开发vue的项目的时候，有时候我们需要用到vuex来保存一些多个页面需要共享的数据，这时候我们就会想到将其放到vuex里。

最近的项目开发里有这样一个需求，根据用户是否登录来控制显示登录按钮还是别的按钮。所以登录的时候需要将用户信息保存在vuex里。之后从vuex里获取用户的信息，如果不为空，则说明已经登录。

但是遇到了一个问题，刷新页面，通过查看控制台，发现vuex的state的数据消失不见了，从而导致不能根据用户是否登录取正确的显示相应的按钮。

二、解决办法

在使用vuex的过程中会发现只要一刷新，state里的数据就会清空，因为vue的数据是保存在内存中，所以需要状态持久化的解决方案，一般大家会推荐使用html5自带的localStorage，也可以使用vuex专用的vuex-persistedstate插件

安装：npm i --save vuex-persistedstate

使用：只需要在store主体文件内引入即可：

import persistedState from 'vuex-persistedstate' //首先引入
const store = new Vuex.Store({ 
// ... 
plugins: [persistedState ()] //加上这个就可以了 
})

这样再刷新页面，发现state里的信息始终都在，除非关闭浏览器页面。