很多技术,刚接触的时候:这是啥?用的时候:哟嚯,是挺好用的!加以研究:卧槽,就是这么个逼玩意儿!
最近接手了一个别人写了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,还说他们就是这么玩的。
所以,个人认为,涉及业务逻辑并且有时刻产生变化可能性的数据坚决不能存本地。
对于上面的图,根据我的提示改变课程号,你会感谢我的。(因为现在直接搜索的话有些慕课网的课程你是很难搜到的,当然,我已经不看慕课网很久了,希望能帮到你们)。