如何解决vue页面刷新，vuex中state的数据丢失问题

Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式管理存储管理应用的所有组件的状态。但是当刷新页面的时候，保存在Vuex实例store的数据会丢失。

原因就是：

因为store里的数据是保存在运行内存中，当页面刷新时，页面会重新加载Vue实例，store里面的数据就会被重新赋值初始化。

解决方法：

方法一：
将state的数据保存在localstorage,sessionstorage或cookie中。
例如将token存储在cookie中，用户的信息是需要经常修改的，因此用户信息持久化本地中，需要在每次取拉取用户信息

方法二：使用vuex-persistedstate作为插件存储在本地，vuex-persistedstate默认的是存储到localStorage里的。我们也可以存到sessionStorage中

npm install --save vuex-persistedstate

1.用localStorage存储数据
import perState from ‘vuex-persistedstate’

export default new Vuex.Store({

//配置
plugins: [perState ()]
})

2.用sessionStorage存储数据

import createPersistedState from ‘vuex-persistedstate’

export default new Vuex.Store({

//配置
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})