75_尚硅谷_Vue__vuex_vuex相关概念总结

好，我们把这一个核心概念里面的一些东西再次过一下啊，因为前面我们简单的过了一下，现在我们应该都很清楚了，基本上第一个state，也就叫VX管理的什么状态啊，它是个什么类型。对象，而对象里面是不是指定了很多具体的状态属性的初始值啊，啊，可能是一个，也可能是什么呢多个。它在整个应用应该是有一个概念叫什么呢？唯一的它不会有多个来源，就是一个唯一的一个数据，就是这有时候也叫数据源啊好，这个首先它的值是什么类型对象，而这个对象里面包含的是什么类型的数据？是不是很多函数也就里面很多方法是吧，而这些方法用来干嘛的，直接更新什么状态，那你要更新状态，是不是要有状态的引用啊，状态引用在哪呢？

参数嘛，对吧，他是不是接收参数呢？啊接收参数，除了接收参数，它还接受什么数据。对吧，有了这个数据，那我们就可以通过state操作更新state里面某一个或者某几个状态都可以。OK，但是这个方法谁来调了？在哪个里面来触发这个action啊，主要是那个图啊。好，那X，那首先它也是个什么对象，呃，这个对象里面，里面内部是什么。是不是函数或者叫方法对吧？呃，这个函数啊，这个函数其实是跟我们组件里面的事件的回调函数是对应关系。这个能懂吗？啊，OK，好，那它里面干什么去了，最终我的X是不是更新状态去的。

但它能直接更新吗？不能，那要去触发谁调用更新吗？Mutation如何来触发呢？调用什么commit和这个commit是不是参数传过来的啊，非常简单，好，我commit的时候啊，有两个东西可以传，一个是什么mutation的名字。这个YY是不是对应没起的名字啊，下面这个呢，数据，而上面这个形参数据和下面这个数据的关系是什么呢？其实就是这个样子，不这个样子。对吧，把数据包装在什么对象里面去传递。那我这一边我要去接收，也最好的写法就是这么写，贝一是吧，好像是。能不能看到，因为我刚才写的是贝一嘛，嗯。

OK，要强调一个事情，我在X里面可以去执行什么呢？异步代码，这个异步代码当然包含定时器，包含请求，尤其是请求。好，最后一个问题，这个一个action是。怎么触发调用呢？啊，在组件中是不是要执行这一段代码。对吧，有人说老师有的时候我好像没写这个代码，他不也执行了吗？那只是我们调用了什么封装的简化的一些语法。但他背后肯定要调用这个方法才行。这个叫分发消息或者叫分发事件都行啊，或者啊，这个里面指定的是什么。X型的名称，诶，其实这个里面也可以传一个什么，是不是数据。能不能看到啊，这个是可以理解的，好gets，用来干嘛了？

计算属性的什么get，呃，这里面因为它是get是什么，看到名字的知道，因为计算属性两个方面，一个是get，一个什么。好，我gets给谁用啊？组件使用吧，那组件用它来干嘛呀，是不是读取这个计算属性的结果显示啊，人家说老师我没有这些计算属性活不下去吗。那没有这些计算属性，没有这个我应该怎么做，那我就应该在组件里面去写这些代码。自己去亲自进行计算，对吧，有人说老师这有区别吗？有一定的思想上的区别就是。我们的组件去操作VX里面相关的东西吧，那也就是说那个组件相当于在上一层。

所以上一层的更接近用户吧，组件是不是更接近用户，而组件去跟随交互，没有X交互对不对。那你想啊，这里面就有一个概念叫封装性，什么意思呢？就是我们在定义语法的时候。应该是尽量让什么呢，上一层简单。懂不懂？说白了，你封装性越好，你上层调用的时候是不是越舒服？譬如说我要做一件事情，要执行100条语句。那我可以把100条语句呢，定义成一个什么函数FN，我上一层是不是只用调用FN就能完成这个功能？这个能不能懂，我把所有的计算属性，相关的计算属性都定义在这个get里面，那也就定义在VX里面。而我的组件是不是只要去读这个数据就可以，也就是说他写代码的时候就更加的什么是不是简单，不然的话你就要把这些计算属性都定义在组件里面去。

人说老师我就想定义在组件里面，那也没辙，那你要这么做也没人阻拦，你只是说编码用这个库，你要利用它的特性，对吧，他提供了这样的语法，提供了这样的技术，那你就应该用。好。下面这个呢，我们还没用到啊，这个用的稍微少一些啊，也就是说还有一个配置也在VX里面啊，Store里面还有一个配置叫modules modules什么意思。模块模块好了，那这个时候呢，我要去我在另外一个里面啊，有一个给大家看一下，大家再了解一下就行。大概到我这里面有一个src-sources，其实我还有一个工程啊，是可以运行的，来看下C，看下V，我给大家跑一下啊。

SIC。NPM也可以运行。好，可以简单看一下，这里面呢，有十多，哎，十多里面有actions get index和type。看看什么功能这里面呢，整个组件里面啊，整个界面里面，我们来看一下那个结构。啊，应该是没错的，刷一下就好了。好，看一下那个view的组件结构，一共。除了AP里面是不是两个组件呢？啊两个组件一个是。一个是cut。这里面大家看一下是什么功能，这里面是产品列表。能看懂吧？下面呢，是你，我们的什么呢？购物车的一个列表。

我不添加了两个购物箱吗？诶，这灰色什么意思，大家啊，对这里面应该有一个库存的概念，是库存为零了，就肯定不能加了啊卖完了，简单来说是吧，好。那这个里面呢，就会有首先。啊，有products这样一个数据要管理吧，其实还有一个数据要管理，就是这个购物车的数据管理。懂不懂啊，OK，或者叫看数据要管理，我们可以看一下它里面管理的是一个什么样的东西。大家看我们有管理的什么，是不是两个状态，一个是date，一个什么。Products。啊，那这个时候他他这里面的做法，看到我们代码嵌入代码，看到他就写了两个，写了一个modules文件夹。好，我们的组件呢，是有除了AP就cut和什么products，你看这个名字是不是有点对应关系啊，对应关系好，我们把它打开看一下它里面是一个什么东西。

是不是那一套啊。能看到不，那也就是说这里面啊，提出下这里面它也有它的什么，它里面的一套。能看到吧，他为什么要这么做呢？其实本质上这个功能来说不需要这么做。这个modus只用于特别复杂状态特别多的应用才需要，一般的应用都不需要用这个技术，什么一个意思，大家想啊，我们现在拆分的方式，看一下我们现在拆分方式是这样一种拆分方式。那有个问题，假设我现在有100个状态。有一个百个状态属性有1000个啊相关的一些方法。那你想？这里面的每个文件，这个actions，这一个mutations都会什么呢？非常非常大吧。

听懂吧，我们这种拆分方式一共就这么几个文件，对不对。啊。这种拆分方式对于特别大型的项目是有弊端的，就是你这个模块非常大。那怎么样去能够做到模块稍微小一点的，大家知道非常大型的模块，比如说假设这个项目啊，功能模块啊有20个。啊，或者说20个可能有多少十个吧。我可以这么做。啊，我可以这么做，怎么做呢？它是这样一个设计啊，每个功能模块它可譬如说功能模块一，功能模块二，功能模块三，它里面有两个状态，它有三个状态，它有四个状态假设啊。这有可能吧，有可能那我就给它创建一个对应的模块下面的一个JS。你管理你的，他管理他的。

这如果是这样拆解的模式，大家想。你模块再多，我的这一这某个文件会很大很大吗。不会。也就是说，我可以分解成是不是十个modu对不对？而每一个model里面是不是都管理着自己的一套啊？就这种分解方式就会不依赖于说，哎，你的状态特别特别多了，就导致你很臃肿的那种情况。但其实一般情况我们用。我们现有的这种方式就够了。大家主要是理解这个，这个它的一个思想在哪里，但大家其实用的几率呢，不算特别高，所以呢，大家先有一个了解就行。里面的一些细节呢，我就不跟大家说了，大家如果有兴趣的话，到时候可以运行看一看。好，后面呢，是一些编码上的一些东西啊，向外暴露一个多对象，这是我们是这个写法无以固定，不会变啊，基本不会变。

在组件中，我们这个是一个简化的语法吧。有map state map和map action，而且这种写法也是基本上是固定的。好，最后呢，我们要去映射度，这个也是固定的一个写法。十多对项啊里面啊，怎么样得到十多对项。再问你干啊？十多对象怎么得到？是this，点多多还是很轻松的。在哪里写这个代码呀？啊，组件里面是吧，那肯定是GS啊，在组件里面去写能不懂所有的组件是不是都可以访问啊好，那这个对象它有什么特性呢？

我说我问这个对象有什么特性，什么意思，就是这个对象有什么属性呢？有什么方法呀，对吧，首先看它有什么属性，第一个state和get这两个属性用来干嘛的。用来获取数据展现的。对吧？下面这个方法用来干嘛的？更新状态去更新界面的，这不就我们组件需要两个方面吗？显示数据。更新显示。对吧，OK。整个基本上内容就是这么多。啊，整个学下来的感觉还是它的这个组织结构比较清晰啊，而且模型非常的简洁。这模型简洁就好在哪了，好在你最后再去写的时候，就是这个结构，再写的时候你很固定啊，组件写完了，Action action写。

对吧，啊，如果你要读数据，写什么gets或者啊就可以去读。其实它的结构组成部分好像还比那个re的结构的组成部分要多一点。但是主要就是它的这个线路啊，线路是非常清晰的。啊，就是这么一个一个闭环啊，只是这里面有个分支对吧。嗯，后面我们写项目的时候，其实复杂度啊，跟这个比也差不多，所以说基本上大家应该要能写，大家今天晚上需要去把两个例子写出来。啊，一个是还有一个是什么todo啊，今天晚上要写出来，明天大家需要去把前面我们讲的没有以及view X的东西都给它过一遍，有的没写的写一写，你不要去专门去复习什么，去整什么那些测试用例什么的，你就以做例子做DEMO为例来驱动，如果不懂你去看一看。

大家如果写过了，最好都写一遍，把整个前面做的一些DEMO都给它过一过，写一写，没写过的优先写，写过的再写一遍，好吧？