轻松理解vuex的运用和常见问题,顺便学会vue企业必备实例

开发 前端
以下就跟大伙分享分享当vue 组件之间的通信感到崩溃时如何运用vuex及面试中常见vuex问题的解决。

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关系

 

看一下这个vue响应式的例子,vue中的data 、methods、computed,可以实现响应式。视图通过点击事件,触发methods中的increment方法,可以更改state中count的值,一旦count值发生变化,computed中的函数能够把getCount更新到视图。

 

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

 

三、vuex实现

我们看下vuex中能像vue中实现改变状态,更新视图的功能。

Store/index.js

 

App.vue

 

四、源码分析

store注入组件install方法vuex是通过vue插件机制将组件注入的。

首先使用vuex,需要安装插件:

 

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

vuex中的数据双向绑定

 

getters实现

 

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

mutations实现

 

actions实现

 

五、小结

Vuex是通过全局注入store对象,来实现组件间的状态共享。在大型复杂的项目中(多级组件嵌套),需要实现一个组件更改某个数据,多个组件自动获取更改后的数据进行业务逻辑处理,这时候使用vuex比较合适。假如只是多个组件间传递数据,使用vuex未免有点大材小用,其实只用使用组件间常用的通信方法即可。

 

责任编辑:庞桂玉 来源: 前端教程
相关推荐

2009-10-10 13:03:52

2023-06-27 07:21:51

前端开发坑点

2020-07-15 10:20:32

前端prototype__proto__

2020-08-26 14:20:24

prototype__proto__ 前端

2017-09-27 09:18:06

云实例优化阻碍

2010-09-27 13:45:38

2009-07-17 10:01:14

Swing和AWT

2009-02-17 23:41:43

Mplayer播放器常见问题

2011-09-07 10:36:58

ubuntuUbuntuOne

2011-02-22 14:00:16

vsftpd

2011-08-24 09:54:05

Lua字符春交互

2015-09-21 09:10:36

排查修复Windows 10

2011-04-01 13:55:24

Java

2011-05-06 15:39:55

硒鼓

2013-11-14 15:47:29

SDN问题答疑

2010-07-14 14:20:47

IMAP协议服务

2010-07-21 09:10:02

Perl常见问题

2010-04-23 09:58:30

Oracle管理

2020-05-25 22:41:27

LoRaWAN物联网技术物联网

2011-04-08 13:58:52

JavaJSP
点赞
收藏

51CTO技术栈公众号