68_尚硅谷_Vue__vuex_结构图

好，现在大家应该对这个图呢有了一定理解了，其实这个图里面还有两个东西没有讲，因为这个。这啥意思啊？Back的API什么意思？叫终端，终端API是啥呀？或者叫后台是吧？啊叫后台会好一点对吧？后台API是啥意思，这个箭头是什么意思，我们在action里面可以去发送什么，呃请求跟后台进行什么交互。这个能懂吧，啊好，这个这个大家应该能够理解。这个指谁？那个Chrome的开发工具？那个开发工具监视的是什么东西？是不是监设的是mutation的调用啊，你的mutation不更新状态去了嘛，它就关键只要你调用mutation，它是不是有一个记录，你调用一次它记录一次，你掉了两次，他就再记录一次。

因为这是我们更新状态就最最核心的一个位置嘛。好，其他的咱都说过来。咱现在呢，就要来去自己来画一下，其实这个结构呢，画的不算特别完整，其实还还有一个结构没有画。在VX里面，除了action，除了state，除了mutations，还一个。是不是gets啊，咱要把它画一下来，这个图是大家必须得会画的。嗯。来啊，其实主体有两个部分，一个是我们试图组建。啊，就是view的组件，再一个大的呢，就是什么呢？VX的对吧？啊，再一个大比较大的就是VX，好来我们把它写一下，这一个是。

嗯，是的，什么component。没你是吧，完了这整个是什么啊VX。这个能不懂？好，下面就要去说的是我们啊组件跟VX如何进行什么交互的。那首先来说我们VX里面是不是有四个结构啊，有四个结构啊，哪四个结构来着啊有。Okay。把它啊复制产生多个吧。State操作state是谁？大家看是怎么操作，是更新还是读对吧，如果是更新是谁mutation对吧，如果是读了进行计算呢？啊是不是gets。

能懂吧，还有一个就是操作mutation的是谁，Actions。先摆好位置是吧，好。来，写好名字。这一个我们取名叫state。这个取名叫gets，这个取名叫mutations。对吧，哎，TS还有一个这一个actions，他们每一个都是什么类型。对象对吧，啊，这个就是说它的设计呢，是比较干净的啊，用起来比较舒服好。这个state里面包含的是什么？是不是数据啊，它是个对象，对象里面数据，这个数据是从哪转移过来的。

是不是将组件中的状态date是转移到这里来呀，那我的组件是不是读这个状态显示。那就两种情况。一种是直接。去读。能不能从这里面读过来好，还有一种呢，我可能需要对数据进行处理后。再去读对吧，说白了就得到这个状态数据所对应的计算属性，这有可能吧，有可能，那也就是说我从这里读。那我们的GS。从哪里读数据state？这个能理解吧，啊，这个要是能理解啊，我就画这样一个箭头，这个数据的邮箱这样的。能看到吗？好。那。下一个事情，这个我们读它是不是就可以显示来呀，那还有一个是更新对不对，更新状态，那更新状态初始是不是我对组件的某一个标签按钮进行了操作呀，操作以后。

我要分发一个消息，或者分发一个事件对不对？分发触发谁调用吗？啊触发action调用。能不能看懂啊，触发它就用啊，OK，那此时我们需要去调用一个，用到一个操作叫什么dispatch。那不懂，它虽然是个函数吧，啊pach一下。好。而我们的action能直接去更新状态吗？不能，他的任务是干嘛啊去啊，请求谁去mutation啊？之所以说请求tation，是因为那个那个方法名叫commit啊，这样能够跟你的方法名是对应上的，也就是说我要调用一下什么commit。

对不，那有一种可能性，我在action里面，我要从后台获取数据再去，对不对，那就有一个东西叫后台。对吧，后台啊，后台叫什么back就后台嘛，有没有看到好这个时候他们之间是一种相互的关系。什么意思呢？我先这样，这个代表我是不是去发请求去接着这样代表什么，我得到一个服务器返回的什么数据，得到数据以后呢。是不是要commit一下，最终去更新状态呗，对不对，能懂不好，而我的mutation里面去干嘛去？叫直接更新什么啊状态。

OK。这个里面啊。叫叫什么来着啊，Muate是吧，MU进行数据转是叫MU吗？嗯，这个关键是这个单词啊，比较陌生啊，就叫直接更新状态吧。这个能不能看到啊好。其实这个这个直接更新状态，我们只要调用这个state里面的属性是不是更新就可以，它还是比较直接的。好。那我们来说下下面的啊，还有一些细节啊，譬如说我们组件里面如何得到状态，有哪些方式啊。比最最直接的方式是通过是多的。嗯，多了50多是吧？啊多了50多啊，那this我就不写了，点state就能得到对吧？当我们可以去用到一个对应的一个映射函数叫什么？Map state，不是X是吧？Map state函数能懂不好，而我们这里最直接的写法是。

点。对吧，啊，接着也有一个对应的音程函数叫map get。能不懂，这也是个函数是吧？能看到吧，好，我们这个dispatch除了用dispach，还有可能用另外一种映射函数叫map actions。而这几个映射的函数是不是用来简化我们的什么编码的？这能不懂，好这个呢是请求，也就是说在view X里面可以直接进行异步操作。

Able，好，其实还有一个结构，这个右边还有一个结构，呃，DV to对吧啊。Dev tool来写一下dev tool是开发工具。他能够去，他监视谁去的，是不是监视他去的啊，监视他去的啊，这个我就不发定了。大概就是这样一个结构。大家跟画的时候肯定是要一边画一边说，你说的时候要有条理啊，你可以先把这两个大的部分先画出来，主线VX，接着说VX里面有几个部分。四个部分，如果你用笔画其实很轻松啊，比这个画起来快一点，你也不用画的特别特别那个。啊，画画几个圈就拉倒啊，对吧？啊，你自己要练一下，先自己先画画，大家真正写的时候尽量用笔啊，别在这上面画，因为你真正面试的时候肯定是在纸上用笔画对吧？啊，不用画的那么那么正规啊，有的人是啊，用纸识咔咔咔啊，不用搞得那个样子，因为你反倒你你要现在这么做是确实看起来很好很好，特别漂亮，都去要呢，你怎么办？你都你到时候想画框框，想画圆圈什么东西的，你不知道大画多大合适懂吗？你一下画大了或者一下画小了啊都不太合适，所以你在平常在练的时候就稍微随意一点，稍微随意并不说就一顿瞎话啊，大概要看得出来你的结构对不对啊，OK，好。

这是大家必须画的一个结构啊，你要说VX这个图是大家必须画的一个东西。啊，只要他问你，你就说我先给你画一下结构看一看，你别等到你再画下结构你才画，我告诉你，他基本上很多时候不会这么问，只要问VX相关的，问你，你用过吗？用过我把结构给你画一画，对吧，我先画几个，再跟你说一画几个，就我哎，你觉得挺透彻的，那不就差不多了，只要他认可你这一点，他别的相关的问题可能就不想问了。

图都画出来了，还说啥呀啊，有的时候就是啊某一个点啊问了很准。