浅谈vuex

很多技术，刚接触的时候：这是啥？用的时候：哟嚯，是挺好用的！加以研究：卧槽，就是这么个逼玩意儿！

最近接手了一个别人写了1/5的vue项目（页面画了1/3，接口啥都没对）;

对于表格中的数据项操作以及点击查看详情，这位同学都是用了很奇葩的处理方式，存store！也就是vuex的中央管理器。

看完我就心中默念一句：卧槽！！！你这不是玩单机么。好好的一个web应用被你整成了单机版。

一、vuex

之前只是知道vuex，也几乎没怎么用过，但是这个项目被这位同学搞成了vuex，那我必须得先知道vuex到底是怎么玩的啊，于是百度看了一下。几篇文章看下来，对vuex了解得差不多了。

二、状态管理的实质

其实所谓的vuex的状态管理，多个视图组件依赖同一个状态，组件通信，这些乱七八糟的表述，实质只有四个字：单例模式。

对于单例模式，如果你不了解的话，那我这里也没工夫去阐述，可能后续我会在设计模式分类中详细讲一下单例模式。

三、vuex的应用场景

并不是所有的应用都适合用vuex，比如我接手的这个项目，就只是一个员工入职信息录入以及展示，根本就不会涉及到多组件之间的信息传递，这位同学copy了一份其他项目的源码，费好大劲删删改改弄成这样，事情是干了不少，但是都是无用功，何必呢！我主张拥抱技术，但绝不是滥用技术！

当多个视图依赖同一状态的时候，vuex是很适合的，因为所有的视图都可以去访问/修改同一个状态实例下的属性，你不必在意组件之建信息如何传递，不用想方设法地去处理父子组件、不同组件之间的信息传递问题，因为这个状态实例是全局的，在项目初始化的时候就引入了这个实例（store），所以所有的组件都是可以编辑的，这是单例模式给我们带来的便捷。

四、vuex的数据留存问题

利用vuex的时候，我们把所有的信息都是存在store这个实例下的，大家都可以操作这个实例，但是这个对象是存在内存里面的，当你的项目经过一系列的操作，往store里面存了很多信息之后，按一下F5，你会发现这个store里面的信息被初始化了。

这是因为，F5的时候，整个项目的Vue对象从内存里面销毁了，刷新之后，又根据main.js重新初始化，所以store也会被初始化啊，这样一来，你存在store里的信息也就淡然无存了。

但是，你可能会发现，我http请求还是可以发啊，token还是有的啊！那是因为用户信息一般是存在浏览器存储里的，虽然表面上看，我们拿用户信息，是类似于this.$store.getters.userinfo，如果你往深里面追的话，就会发现这个用户信息必然是从浏览器存储里面拿的（Local Storage、Cookies等等）。

五、都存浏览器

既然存浏览器就能保证数据不丢失，那么为了处理业务逻辑，那么我们的数据是不是可以都存浏览器存储，然后通过$store去浏览器存储拿呢？

其实，这样做没有什么不可以，但是：

我最近遇到一个问题，我有一个同事，可能是为了秀一把他store玩得有多好吧，把用于信息共享的数个字段全部存到store（存到浏览器存储），先说一半，大家来看一下这张图：

没错，就是URL（统一资源定位符），一直以来我们都是用url的形式来获取一个特征值，然后再在页面用XHR去根据这个参数值来查相关信息，然后填充页面，因为这些数据时需要时时获取的。

像这种东西，每跳一个页面都可能出现数据改变的可能，这种东西，你能存本地？？？

可能是我的这位同事做内网项目太久的原因亦或是想秀一把吧，就直接把一个项目的相关信息全部存到store，还说他们就是这么玩的。

所以，个人认为，涉及业务逻辑并且有时刻产生变化可能性的数据坚决不能存本地。

对于上面的图，根据我的提示改变课程号，你会感谢我的。（因为现在直接搜索的话有些慕课网的课程你是很难搜到的，当然，我已经不看慕课网很久了，希望能帮到你们）。