想探讨这个问题很久了，从网上找各种资料发现都不是很明了，或者有的压根就不对，于是自己研究一下，尝试着说清楚这件事，如果有不对的地方，还请各位大牛指正。小弟将及时更正以免误人子弟。
首先，需要先弄明白一个问题，为什么不能单独使用vuex或者单独使用localstorage（sessionstorage一样的道理）？
1.为什么不能单独使用vuex？因为vuex刷新页面会丢失。
为什么会丢失？vue是单页面应用SinglePage Web Application。什么叫单页面应用？每次刷新页面相当于重新生成，或者说加载（初始化）页面，每次都是一个新的，当然会丢失。
2.为什么不单独使用localstorage？其实非要这么用，是完全可以的。但是为什么不这么用呢？因为storage存储的是文件，而vuex是缓存，当然缓存速度快，所以要二者一起使用。
3.如何实现vuex+localstorage实现缓存用户的信息，这里我写了个较为简单的例子，下面贴代码（小白不经常写博客，不知道如何在文章里写技术代码，只能贴图了，请见谅）
具体流程：
1.登录成功后，返回所需信息，存入store及localstorage
2.页面通过getter方法获取所需信息
3.如果某些地方需要修改storage，需要使用commit调用mutation中的方法设置
4.退出清楚缓存
主要文件
index.js
getter.js
mutation.js
登录成功的代码
退出的代码
页面取值的代码
相信有些vue基础的朋友应该能看懂以上代码。
当时最纠结的一个问题就是，为什么非要用store的commit调用mutatuion中的方法来设置值？
而不是直接this.$store.state.userInfo = pojoVuexUser;？？？？？？
如果您没考虑过这个问题，那我觉得您应该不是一个合格的程序员，或者只能是个普通的码农了。
然而本人抱着怀疑的态度尝试了下，this.$store.state.userInfo = pojoVuexUser我擦，居然成功了，并且在页面上取值也是响应式的！！！！！！赞。但是，为毛不能这么使用？且vuex官方原文中也说了
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
大概说一下，如果直接调用this.$store.state.xxx这样赋值的话，如果开启vuex的严格模式是会报错的，且vue的调试工具不会记录state的改变。
具体本人就不在这里细说了，这里有篇大神的文章，解释的很清楚
https://blog.csdn.net/zhq2005095/article/details/78359883
网友评论