vuex在刷新页面时保持数据不变（vuex状态持久化）
问题：
在 vue 项目中使用 vuex 来进行数据状态的管理，当刷新页面时，vuex 中 state 的数据会出现初始化问题（数据丢失）
解决方法：
1.使用 webStorage 缓存
当浏览器窗口关闭或者刷新时，会触发beforeunload事件，此时，可以使用 webStorage 缓存来实现 vuex 在刷新页面时保持数据不变
created(){ //在页面加载时读取sessionStorage里的状态信息 if(window.sessionStorage.getItem("userInfo")) { this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { window.sessionStorage.setItem("userInfo", this.$store.state.userInfo) })}
2.使用vuex状态持久化插件vuex-persistedstate
vuex-persistedstate插件使用浏览器的本地存储（ local storage ）对 vuex 的状态（ state ）进行持久化
安装 vuex-persistedstate：
npm install vuex-persistedstate --save-dev
在store文件夹的 index.js 中使用
//引入vuex-persistedstateimport createPersistedState from 'vuex-persistedstate'......export default new Vuex.Store({ ...... //配置vuex-persistedstate plugins: [createPersistedState( //配置将vuex的状态储存到sessionStorage中（默认储存到localStorage中） { storage: window.sessionStorage } )]})