veux的使用

Dax 等级 396 0 0

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对其进行响应化处理,从而使得这些状态发生变化时,能够导致组件重新渲染

收藏
评论区

相关推荐

vue高级进阶系列——用typescript玩转vue和vuex
       用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对vue的状态进行统一管理,如下图介绍了其管理模式: im
通过一个简单实例了解vuex
简单说明 什么是vuex,vuex怎么使用,什么场景下适合使用vuex, vuex 文档(https://links.jianshu.com/go?tohttps%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)中都有介绍。看完文档之后,都知道vuex的核心有State、Getter、Mutation、Action、Modul
Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。 Vuex 4 正式版本现已发布。 Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3,并提供了与 Vuex 3 完全相同的
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
vue: 解决vuex页面刷新数据丢失问题
一、问题描述 1、一般在登录成功的时候需要把用户信息,菜单信息放置 vuex 中,作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被清空。 2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎
记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
Vue方向:Vuex状态管理:Action异步函数
1、Action的使用        Action类似于mutation,不同之处在于Action提交的是mutation,而不是直接更改状态,Action可以包含任何的异步操作。 2、定义以及使用Action代码 3、分发Action代码代码action 4、Action函数参数
veux的使用
1)说说什么是vuex(下定义)2)vuex解决了哪些问题,为什么要用(必要性)3)怎么使用vuex(使用方法)4)描述vuex原理,提升答案深度(深层原理升华答案)vuex的流程图分析:我们可以看到图中虚线框包裹起来的部分就是vuex的三个组成部分(Action,Mutations,state),我们来简单的捋一下整个流程:首先vue的组件在响应用户行为交
Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters
1、mapState和mapGetters的作用      mapState用于将state中的数据映射到组件的计算属性中,而mapGetters用于将getter中的计算属性映射到组件的计算属性中,之前获取Vuex数据都是通过$store找到state对象,再去state中去拿数据,操作getter,muta
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和
Vue3现状报告及未来规划
近况158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。对比去年Devtools:110 万 158 万(+43.6%) NPM:620 万 940 万(+51.6%)Vue 3.0 One Piece自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。Vue Router 4.0已经稳定。Vuex 4.0已经稳定。生态慢慢
人工智能数学基础-线性代数1:向量的定义及向量加减法
一、向量 1.1、向量定义向量也称为欧几里得向量、几何向量、矢量,指具有大小(magnitude)和方向的量。它可以形象化地表示为带箭头的线段。箭头所指:代表向量的方向;线段长度:代表向量的大小。与向量对应的量叫做数量(物理学中称标量),数量(或标量)只有大小,没有方向。1. 在物理学和工程学中,几何向量更常被称为矢量。 2. 一般印刷用黑体的小写
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按

热门文章

js高频手写大全JS核心原理理解闭包如何使用vue中的nextTick

最新文章

js高频手写大全JS核心原理理解闭包如何使用vue中的nextTick