zoukankan      html  css  js  c++  java
  • 浅谈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,还说他们就是这么玩的。

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

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

  • 相关阅读:
    自学Aruba6.3-账号管理(web页面配置)
    自学Aruba6.2-控制器基本维护操作(web页面配置)
    自学Aruba6.1-基本网络参数配置(web页面配置)
    自学Aruba5.1.2-带宽限制
    自学Aruba5.1.1-基于时间的Role定义
    自学Linux Shell19.2-gawk程序高级特性
    自学Linux Shell19.1-gawk程序基础特性
    自学Linux Shell18.3-sed实用工具
    自学Linux Shell18.2-sed编辑器高级特性
    js 数组API之every、some用法
  • 原文地址:https://www.cnblogs.com/eco-just/p/10502240.html
Copyright © 2011-2022 走看看