博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一看就懂的VUEX运用与常见问题,BAT大佬给你把脉
阅读量:4117 次
发布时间:2019-05-25

本文共 1791 字,大约阅读时间需要 5 分钟。

640?wx_fmt=png

Vue的核心是数据驱动和组件化开发,无论是组件的封装还是组件的传参,都是面试中最常见的问题,也难倒了无数面试者,以下就跟大伙分享分享当vue 组件之间的通信感到崩溃时如何运用vuex及面试中常见vuex问题的解决。

先看常见问题:

使用Vuex只需执行 Vue.use(Vuex),并在Vue的配置中传入一个store对象的示例,store是如何实现注入的?

state内部是如何实现支持模块配置和模块嵌套的?

在执行dispatch触发action(commit同理)的时候,只需传入(type, payload),action执行函数中第一个参数store从哪里获取的?

如何区分state是外部直接修改,还是通过mutation方法修改的?

带着这些疑问,让我们先从什么是vuex开始——

一、vuex是什么?

Vuex是专门为Vue服务,用于管理页面的数据状态、提供统一数据操作的状态管理系统,相当于数据库mongoDB,MySQL等,只不过它的数据是存储在内存中,页面刷新即消失。

二、vue和vuex关系

640?

看一下这个vue响应式的例子,vue中的data 、methods、computed,可以实现响应式。

视图通过点击事件,触发methods中的increment方法,可以更改state中count的值,一旦count值发生变化,computed中的函数能够把getCount更新到视图。

640?

那 么vuex又和vue这个响应式的例子有什么关系呢?
视图通过点击事件,触发mutations中方法,可以更改state中的数据,一旦state数据发生更改,getters把数据反映到视图。
那么actions,可以理解处理异步,而单纯多加的一层。
既然提到了mution s actions这时候 就不得不提commit,dispatch这两个有什么作用呢?
在vue例子中,通过click事件,触发methods中的方法。 当存在异步时,而在vuex中需要dispatch来触发actions中的方法,actions中的commit可以触发mutations中的方法。 同步,则直接在组件中commit触发vuex中mutations中的方法。

640?

三、vuex实现
我们看下vuex中能像vue中实现改变状态,更新视图的功能
Store/index.js

640?

App.vue

640?

四、源码分析
store注入组件install方法
vuex是通过vue插件机制将组件注入的
首先使用vuex,需要安装插件:

640?

可见,store注入 vue的实例组件的方式,是通过vue的 mixin机制,借助vue组件的生命周期 钩子 beforeCreate 完成的。
即每个vue组件实例化过程中,会在 beforeCreate 钩子前调用 vuexInit 方法。
vuex中的数据双向绑定

640?

getters实现

640?

从上面源码,我们可以看出Vuex的state状态是响应式,是借助vue的data是响应式,将state存入vue实例组件的data中; Vuex的getters则是借助vue的计算属性computed实现数据实时监听。
mutations实现

640?

actions实现

640?

五、小结
V uex是通过全局注入store对象,来实现组件间的状态共享。 在大型复杂的项目中(多级组件嵌套),需要实现一个组件更改某个数据,多个组件自动获取更改后的数据进行业务逻辑处理,这时候使用vuex比较合适。
假如只是多个组件间传递数据,使用vuex未免有点大材小用,其实只用使用组件间常用的通信方法即可。
双11前端福利
互联网即将改变并正在改变这个世界,而你我身逢其时。大前端时代来临,前端技术正在快速的发展,未来空间也越来越明朗,大家一定要抽时间把自己的技术提升起来。
今天可以给大家推荐腾讯课堂一门好课! 《VUE入门到进阶教程》腾讯课堂原价999,
双11限时0.1元抢! 已经有20000+人疯狂抢购!
微信扫描二维码,直接获取VUE入门到进阶教程,和最新前端学习资料。
640?wx_fmt=jpeg
时间就像海绵里的水,只要愿挤,总还是有的!
在互联网速度更新的时代,开发人员还是需要不断的学习,不断的进步!
2019年还有最后两个月就要结束了,如果您的银行卡余额总觉得紧张,哪就请为2020年做好规划吧!为梦想而战斗吧!
640?wx_fmt=jpeg
640?wx_fmt=png

转载地址:http://bbfpi.baihongyu.com/

你可能感兴趣的文章
常用js收集
查看>>
mydata97的日期控件
查看>>
如何防止sql注入
查看>>
maven多工程构建与打包
查看>>
springmvc传值
查看>>
Java 集合学习一 HashSet
查看>>
在Eclipse中查看Android源码
查看>>
Android-Socket登录实例
查看>>
Android使用webservice客户端实例
查看>>
层在页面中的定位
查看>>
[转]C语言printf
查看>>
C 语言 学习---获取文本框内容及字符串拼接
查看>>
C 语言学习 --设置文本框内容及进制转换
查看>>
C 语言 学习---判断文本框取得的数是否是整数
查看>>
C 语言 学习---ComboBox相关、简单计算器
查看>>
C 语言 学习---ComboBox相关、简易“假”管理系统
查看>>
C 语言 学习---回调、时间定时更新程序
查看>>
C 语言 学习---复选框及列表框的使用
查看>>
第四章 - 程序计数器
查看>>
第七章 - 本地方法栈
查看>>