veux的使用

Dax
• 阅读 1273

1)说说什么是vuex(下定义) 2)vuex解决了哪些问题,为什么要用(必要性) 3)怎么使用vuex(使用方法) 4)描述vuex原理,提升答案深度(深层原理升华答案) vuex的流程图 veux的使用 分析:我们可以看到图中虚线框包裹起来的部分就是vuex的三个组成部分(Action ,Mutations,state),我们来简单的捋一下整个流程:

首先vue的组件在响应用户行为交互之后向vuex通过dispatch(派发)的方式递交Actions(动作)——如发送Ajax请求等等 然后Actions要改变状态实际上还是需要通过commit(提交)的方式来提交Mutations(变更)——来改变vuex中的状态 最后state(数据)得到改变,基于Vue的数据响应式,数据发生变化,通知Watcher进行组件更新,视图便重新渲染 这其实就是我们日常使用的vuex的流程,通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,以相应的规则保证状态以一种可预测的方式发生变化,这就是vuex背后的基本思想 一、vuex的定义 首先我们仍然还是先来看官网对其的定义:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 通过阅读官方的定义,我们只需要关注其中两个关键字即可:“集中式”、“可预测”

集中式:其实很好理解,集中式的做法其实就是通过抽象出一个单独的Store类来统一管理整个的状态(类似于古代中央集权制度,由皇权统一管理) 可预测:可预测主要是体现在Mutations,因为所有状态的变更必须经过mutation,所以在这一层级我们可以做到拦截,可完整的知道用户改变状态的记录 总结:vuex是vue专用的状态管理库,它以全局方式集中管理应用的状态,并且可以保证状态变更的可预测性 二、必要性 我们可以先来看看如果没有vuex的情况下会遇到的问题,其实我相信我们平时开发就应该深有体会,那就是当应用中多个组件共享状态时,就可能遇到两种情况:

多个视图依赖于同一状态 来自不同视图的行为需要变更同一状态 我们可以想一下,如果不考虑vuex,当碰到上面两种情况,比如组件之间嵌套的层级过深或者兄弟组件之间想要传递状态是不是都非常的麻烦?而且这也会让我们的应用代码处于一种混乱的状态,无法维护。

因此,那为什么不把组件共享的状态抽离出来以一个全局单例模式管理呢?这样任何组件不都可以获取状态和触发行为了吗?并且定义一种强制规则来约束每个组件的调用方式,这样代码不就很好维护简洁了吗?

所以vuex出现了!

总结:vuex主要就是解决多组件状态共享的问题,vuex通过把组件的共享状态抽离出来,以全局单例模式管理,任何组件都可以使用一致的方法获取和修改状态,响应式的数据也能够保证简洁的单向数据流动,代码也会变得更加结构化且易维护 三、使用场景 看完了前面的必要性,那我们是否一定要使用vuex呢?或者什么时候才考虑使用vuex呢?其实这个问题在官方文档里面给出了很好的答案: veux的使用 总结:vuex并非必须的,他帮我们管理共享状态,但是也带来了更多的的概念和框架,所以如果我们的应用没有想象的那么复杂或者没有大量的全局状态需要维护,我们完全不需要使用vuex

四、使用方法 接下来我们就来简单的描述一下在应用中如何使用vuex(PS:因为主要是面试题分析,具体代码方面的就不细说了):

首先是对核心概念的理解和运用,将全局状态放入state对象中,它本身是一颗状态树,组件中使用store实例的state来访问这些状态 使用配套的mutation方法修改这些状态,并且只能使用mutation修改状态,在组件中调用commit方法提交mutation 如果应用中有异步操作或者复杂逻辑组合,我们需要编写action,执行结束如果有状态修改仍然需要提交mutation,组件调用action使用dispatch来派发 模块化,通过modules选项组织拆分出去的各个子模块,在访问状态时需要添加子模块的名称,如果子模块设置了namespace(命名空间),那么在提交mutation和派发action时还需要额外的加上命名前缀 五、实现原理 其实用一句话来描述vuex的实现原理那就是——“借鸡生蛋”,借用vue已有的响应式来实现vuex自己单向数据流时的数据响应式

如果有兴趣想知道vuex的具体实现的可以参考前面的文章:手写自己的Vue全家桶之kvuex

总结:通过学习源码,我们发现vuex实现单向数据流时需要做到数据响应式,是借用的vue的数据响应式特性实现的,它会利用vue将state作为data对其进行响应化处理,从而使得这些状态发生变化时,能够导致组件重新渲染

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Chase620 Chase620
3年前
vue: 解决vuex页面刷新数据丢失问题
一、问题描述1、一般在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被清空。2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Souleigh ✨ Souleigh ✨
3年前
Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。Vuex采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。Vuex4正式版本现已发布。Vuex4的改进重点是兼容性。Vuex4支持Vue3,并提供了与Vuex3完全相同的
九路 九路
3年前
通过一个简单实例了解vuex
简单说明什么是vuex,vuex怎么使用,什么场景下适合使用vuex,vuex文档(https://links.jianshu.com/go?tohttps%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)中都有介绍。看完文档之后,都知道vuex的核心有State、Getter、Mutation、Action、Modul
可莉 可莉
3年前
了解Vuex状态管理模式
1Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢?vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这