vuex页面刷新数据丢失问题的多种解决方法

　　为什么说刷新页面vuex的数据会丢失
　　刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。第一种方法用sessionStorage
　　将接口返回的数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。
　　在store文件夹里面的js文件示例如下conststate｛authInfo：JSON。parse（sessionStorage。getItem（COMPANYAUTHINFO））｛｝｝constgetters｛authInfo：statestate。authInfo，｝constmutations｛SETCOMPANYAUTHINFO（state，data）｛state。authInfodatasessionStorage。setItem（COMPANYAUTHINFO，JSON。stringify（data））｝｝actions模块里无需使用sessionStorageexportdefault｛namespaced：true，state，getters，mutations，actions，｝
　　其实这里还可以用localStorage，但是它没有期限；所以常用的还是sessionStorage，当浏览器关闭时会话结束。第二种方法是vuexalong示例如下
　　（1）安装vuexalongnpminstallvuexalongsave
　　（2）在store文件夹里的index。js中引入vuexalong并配置相关代码importVuefromvueimportVuexfromvueximportindexOnefrom。modulesindexOneimportVueXAlongfromvuexalongVue。use（Vuex）conststorenewVuex。Store（｛strict：false，modules：｛indexOne｝，plugins：〔VueXAlong（｛name：along，存放在localStroage或者sessionStroage中的名字local：false，是否存放在local中false不存放如果存放按照下面session的配置配session：｛list：〔〕，isFilter：true｝如果值不为false那么可以传递对象其中当isFilter设置为true时，list数组中的值就会被过滤调，这些值不会存放在seesion或者local中｝）〕｝）exportdefaultstore；第三种方法是vuexpersistedstate示例如下
　　（1）安装vuexpersistedstatenpminstallsavevuexpersistedstate
　　（2）在store文件夹里的index。js中引入vuexpersistedstate并配置相关代码importVuefromvueimportVuexfromvueximportuserfrom。modulesuserimportcreatePersistedStatefromvuexpersistedstateVue。use（Vuex）conststorenewVuex。Store（｛modules：｛user｝，plugins：〔createPersistedState（｛storage：window。sessionStorage，reducer（val）｛return｛只储存state中的useruser：val。base｝｝｝）〕｝）exportdefaultstore；第四种方法是vuexpersist示例如下
　　（1）安装vuexpersistnpminstallsavevuexpersistoryarnaddvuexpersist
　　（2）在store文件夹里的index。js中引入vuexpersist并配置相关代码importVuefromvueimportVuexfromvueximportindexOnefrom。modulesindexOneimportVuexPersistencefromvuexpersistVue。use（Vuex）constvuexLocalnewVuexPersistence（｛storage：window。localStorage｝）conststorenewVuex。Store（｛strict：false，modules：｛indexOne，｝，plugins：〔vuexLocal。plugin〕｝）exportdefaultstore；结语：其实解决此问题的方法有很多，基本上都是要借助于localStorage或者sessionStroage来存放。