66_尚硅谷_Vue__vuex_counter应用(vuex版本1)

好，下面呢，我们写写它的时候呢，非常简单，需要去创建一个模块。名字就叫什么呢，使舵。那也就是说这一个是VX的核心管理对象模块。就是十度，但是我们现在有个问题，VX我们有吗？还没有是不是，所以我们先得干嘛去先下载把这个停下来啊，来n PM install，杠杠c view。X。好。来啊，等它下载下来，我们这里面可以用的啊，我们先啊，既然要创建VX的核心管理对象模块，那我现在引入VX吧，VX。

现在还没有，因为它还没有去识别到来切换一下。再看一下有没有啊，有了吗？有了是吧，那它是view的一个插件，所以要不要引入，要来我们把view也引入一下，Import view from view好接着要做一些什么事情，声明使用谁VX。能看懂吧，好，那我们最终向外暴露的是一个啊，核心对象模块是哪个呢？十度。啊，Store对象，而这个多对象怎么产生呢？我跟大家写一写，这个大家可能开始不知道，没关系啊，是这样写的，六一个v X d store，那我问大家这个多什么类型。是什么构造函数，对不能懂不啊，而这个函数它不是在外围，是在这个VX嘛，内部听懂不？这个VX其实包含好几个东西，它包含好几个东西，所以说我这里面用的是十度好写法很固定啊，它的写法是。

非常非常固定的，这里面一共有四个配置，比较常用，我直接就写出来是对，这叫什么状态。是吧，还有一个mutations，嗯，这一个怎么翻译呢？是包含多个更新state函数的什么对象？能不懂这是状态对象。或者说包含多个状态对象能不能好，还有一个叫什么actions啊，这个呢是。

呃，对应啊什么事件回调函数的，呃，包含应该说。包含多个对吧，包含多个，所以啊，事件回调函数的什么对象。啊好，还有一个啊，是我们后面用的啊叫什么呢？Get，我先把这些结构先写好，因为结构是固定的。啊，这个呢，是计算属性啊，包含。哎，包含多个，呃，Get计算属性，也就是说这个计算只有一部分，没有set，只有什么get属性函数的对象。好。那下一步我怎么写？是不是把这些这四个变量都定义出来呀？是这意思不啊，第一个这不是状态吗？写什么constant state啊，等于。

一个什么，等一下先写好摆好啊，先摆好，OK这一个啊，这个他是吧，来叫什么constantations等于一个对象。认了吧，好，下面。叫什么？Action等于一个对象。是为什么它的这种代码好写啊，就是因为它的结构非常非常固定啊，来，再来一个，先写好摆好的，再一点点填。能不能看懂，好能看懂以后下面啊，我们要开始真正的往里面去准备，去写东西，但是我们说过了，这一个对象创建好了以后，需要将它配置好。

就这一个对象。也就说现在写了有用吗？没用得干嘛呀啊，得去映射是吧，得映射一下，那我先得什么引入import store from点斜杠store对吧，通过什么名称来配置了。很简单吧，好，那配好了以后，下面啊，我们要去写谁呢，写它。写这一个啊，改这个，我们把这个备份一个啊，把这个备份一个。一。我们是不是要改它呀？好，来改掉它啊，首先得说这个date里面的状态，还有我自己管理吗？不能啊，这交给谁VX的多是吧。放到哪里了，对。有没有看到这实际上是不是在初始化状态呀？嗯，这个是在初始化状态啊。

好，下面啊继续啊继续改造，那整个就没用了呗。能不能看懂，好，那没用，以后关键问题来了，我这。我去了，俺去看了。是不是不是要去十多里面去取状态，它有这个状态对不对，那就要说了，我组件如何跟它关联起来，是不是意思，如何能得到这一个VX管理的状态吧，那就要看一下它的那下面仔细的就要看一下它里面东西了。来啊，看一些东西什么东西了，这一个。这个里面我们看一下，这里面看看石头来。这里面有一个概念叫多对象。

啊，十多对象，十多对象有一个，看它有个属性叫什么state。那也就是说，我只要得到store对象，是不是就可以取到状态了？能看到吧，啊OK，那关键是我在组件里面如何来得到什么。十多对象是这概念吧，这个十多对象是不是配置给了我们的，在这里面配置了一下呀，好这个配置就会产生一个结果。啊，这个得说一说啊。我看这个你们都知道了，这上面也着是吧，好来啊，在这个里面，一旦我做了这样一个映射配置，它就会产生一个结果。这个结果刚才没说，我们来这里面写个注释，结果是什么呢？所有的主见对象都多了一个什么属性，叫什么多了波十多啊，这个多了十多，就是这个多对象相当于对不对。

而这个store对象，它是不是又有state属性，有这样一个，对啊，Get对象有这样一个方法，而我们当前用的是谁state？能不懂？好，那你说我现在该怎么处理啊？这个多少老十度点S够吗？这是个对象嘛，里面有什么看。对不对，好。没有问题，那下面这一个。是不是我这个地方有一个它是吧，计算属性需要去处理，要得到这个count对不对，好，那得到这个得到这个count，那我可以这么说，诶其实这个计算属性对应于我们这个store里面的哪个东西了，这个东西。

能懂吧，也就是说什么意思呢？我可以在这里面定义一个计算属性。它是一个函数，它一个结果，那个结果啊，到时候就是我们的这个这样一个结果，类似的结果。战略是一个结果。能懂不好，关键的问题就在于肯定不能这么写，对吧，它这个地方也就是说我们要想去得到count，是不是需要去操作这个state里面的这个count去读，对不？那我们其实开始最的是state点，但是这个得说一下，真正在写下面的时候，这些结构都会单独的放在不同的模块里面去。

这是一个文件，这是一个文件里面，这在另外一个文件里面，这个可能又在另外一个文件里面，是不是在不同的区域相互隔离的。对吧，人说引入，其实他不希望你这么做啊，他这里面会给你传一个什么呢。State。那这样我还要去外面取吗？不需要，你需要什么我就为你准备什么，能懂不，不需要我自己传啊，这个不需要我自己传了，这整个vvox他知道这个state，他管理的这些都是他调用的一些函数。懂不懂，我是需要声明他去执行。他能看到state吧，当然。有没有看到好关键的问题就是我在这个里面该如何做呢？来看一下文档。他除了这个state还有一个什么？

Gets。大家看看我下一步该怎么做？多了福度点get点它是不是有一个计算属性里面。叫什么好？那我加括号吗？要加吗？不需要，还记不记得我们的get需要自己调吗？Get我们自己料啊。我们从来就是计算属性get方法和set方法，我们自己掉吗？我们都说它这两个法是不是毁掉还做？当我们去读这样一个属性所对应的值，读它的值的时候，是不是自动调用get，什么时候调用set，是不是我给他重新附一个新的值的时候就调set呀？你这里面不能调你调你你你不要传state吗？这个不需要你做，这是计算属性get。

啊OK，记住啊，不需要调用啊，亲自就调用啊，只需要什么呢？读取当属性值。也就是说我只要点这个名字是不是就可以了，能不能看到啊，OK，它就是这样一种语法啊，还是比较简洁的。好。还没完呢，这里面还有谁？这个东西。是吧，啊，也就是说我们现在啊，现在要做的事情，我们能直接这么做吗？现在。不能，我日子里面根本就没有count，对吧？Count现在被谁管理着？是多少，你VX是多少管理着？那下面相当于我是不是要通知VX去更新。X啊，去干嘛去？

去增加吧，能不能好来吧。那通知V这个也不需要了，我们自己也不需要读，对不对啊，都不要了。通知UX去增加，来看一下文档。那就需要什么这个方法了。对不对，来吧，谁来调啊。多，老婆多。我有这个变量吗？我。我这么写的那部去找变量吗？我有这个变量吗？啊对，这里面我们一直都忘了去写一个东西叫什么this，也就在JS里面写和在模板里面写是不太一样的，模板里面不需要写什么Z点。对不对？我们在GS里面必须写什么z.Z代表什么组件对象？刚才我们是不是说过了，组件对象有这个属性？

能不懂好，没问题，那就很好办了。十天。多夫斯D第好。第一次派需要分发啊，你可以把它想成分发消息，分发事件都可以，还记不记得我们说分发事件，触发事件需要指定两个东西，消息名，还有什么数据，如果需要数据的话，对吧？那我们此时要分发，譬如说假设我们给它取个名字就叫什么？Re，名字比较好对不对？好，我们这个增加需这个操作需要数据吗。需要传谁？无非这两个是看着，需要我传过去吗？不需要，他管这叫看着我这个一需要传过去吗？需不需要？

我的天呐，一它是个固定的这个东西都是不是加一，就是减一，这个一不是固定的一个值吗？我又不是说我有会有，有可能是一，也可能是二，有可能三，那我是为了传一个number过去，你说你传个一过去，你每次都传一吧。那何必呢？能不懂啊，因为我们传的是固定的东西，就没有必要传了，好来啊，而我我们说过分发这个消息触发谁调用呢？啊触发啊多中的什么action调用，而且是对应的。是吧，那怎么个对应法呢？你怎么对应起来呀，啊名字嘛，这个名字对应这不很正常的吗？也就是说我要在这里面写一个什么。是不是函数，这一个函数就是一个什么。

Action，这相当于是不是增加的action？真的不要能懂啊好。来关键这个X里面，我们最终是我们看一下这个里面，一个是看这个图X里面触发谁调用去的。有是吧？啊需要调用哪个函数了commit，那我有commit吗？现在没有，你说你需要一个东西，你没有，那怎么，那一般情况下怎么做的。啊，肯定是通过参数来接收这个东西。这个能不懂，我们来看一下这一个action。是怎么个写法，大家看到啊，大家需要去看懂这个东西。这就是某一个action比较完整的写法，好，这个怎么理解，还有一个大括号，一个先把这个可以不看。

大括号抗密的是啥意思哦，对吧？来我们来写一写，写在这边大家来看啊，可能清楚一点，有什么意思这个样子。我声明的时候是这么声明的，我调用的时候，我把调用的代码也写一下，大家看看啊。com的执行。那我请问你说我这个函数调用的时候，因为不是我调的啊，是一个回调函数，你说它传的时候传的是什么结构对象，对象里面什么结构。所有。对象里面包含了什么东西？对，包含了一个看B的方法。能不懂，而我现在是不是通过这种方式来直接看到这个抗的方法的函数，直接就可以是不是执行它对不对，而我提交是提交给谁的，相当于啊说一下叫提交一个mutation。

啊，提交mutation。也就是说我这个commit最终导致某一个什么mutation调用。懂不懂，那我们现在可以想一想啊，在写它之前，我们先把这个写一写。Tation里面写什么更新状态的一些函数，那请问我们这这个状态有哪些直接的更新操作？有几个？没有四个，只有两个，只有两个。虽然说我们的那个组件里面有四个功能吧，但是本质上。只有两个操作，加一和什么减一。对不对，所以我这里面啊，OK，只有两个函数啊，一个是增加的特和什么减少的，而一个是一个什么。

是一个函数。能不懂是不是函数吗？好来。写吧，一个是增加是吧。啊，平常呢，我可能跟因为这个也叫increment，这个也叫INC，它容易搞混，所以我把它写成大写故意。可以吧，好来，而我我说过这一个函数内部是不是更新状态去的状态呢，有经验了是吧，啊接收。那非常好办的啦。有没有看到啊，那另外一个。类似改改名字叫。

可以吧，呃，这个地方是什么减减。能不能看到。好。来，那现在我要提交mutation，提交一个什么样的tation，是不是增加的mutation。那请问你觉得我们怎么对应呢？那你觉得传个什么参数？什么类型传的参数。是不串跟刚才是一样的，刚才我们这个地方大家看到我们组件里面。怎么通知X呢？是不是查一个名称？其实思想是一样的。就大家重点要把这个设计想法给大家想清楚，其实就是这样的。我们需要传数据吗？主要是我们真的没有什么数据需要传的，我们不需要传数量吧，不需要看他没有任何的条件，如果有条件啊，就需要可以传数据的，比如说传个传二传个三是不都可以啊，啊现在我没有。

这个能不能看懂，好能看到那。增加的搞完了，那其他的其实是不是类似的搞法去处理。也就是什么意思，大家看它下面的这个。写个什么，我写完它以后马上写去。对，Action。写action，也就是说我们要去写一个是不是减少的action对不对，而这个地方要靠所啊，是减少的action对吧？啊，而这一个也叫什么，对不对。没问题吧，没问题，好来下面上面的方法名啊，这个我已经有了，对不对。

可以了吧，就可以了，好另外一个还有两个是吧。啊，还有两个来。看着我啊啊，我就直接啊这样做把它。我们是如果是他这个都不要啊，我们让组件简洁一点好吧，这个写个什么，写个这个名字行吧。可以吧，下面这个。看这里啊，直接写个这个名字啊，直接这个把它做掉啊，给它去掉拉倒。那么看到那也就是说我们现在组件里面是不是很干净的一些代码，非常干净的一代，而且这些代码好像都差不多。是不，这个还有优化的空间，这都这都这个代码都一样的，你没看见吗？就是名字不一样。对吧，后面再说啊，后面再讲啊，来我们这边。啊，我们这边还有哪些，呃，下面是一个呃，条件增加对吧？啊带条件的啊还写好来写一下叫ina，不能不随便瞎写自己写。

Copy，这能保证你写的是对的。这懂不懂？好，来，Come。对吧？关键的问题来了，我现在是不是要是基数才会增加呀，也就是说我最终要执行它，但是呢，得有什么，得有条件，而这个条件需要读取哪个数据，是不是读取这个count，要读取抗的是不是需要state，那我现在有state吗？没有。其实这个地方，这个对象里面除了有靠me的方法，还有state的属性。人说老师这为什么有啊，这就这个套路，他社交这个套路，我们就是要用他这个套路就行。

啊，我们现在确实需要state吧？那怎么办？使state.count模拟啊，等等于一。能不能看到啊，也就是说我们在X里面可以执行一定的逻辑，对不对啊，OK，好，下面更重要的来了啊。就是异步的，哎，这个还记得在re里面，要想实现异务还是很费劲的，对吧？啊OK，它叫E步的action，他很轻松直接就可以干。嗯。来写写它，接着我这里面需要有一个commit就行，State不需要里面写什么set timeout，哪一个箭头函数对吧，哪一个1000。

对不对。有没有看到，也就是说我们在X里面直接就可以执行什么异步代码。能看懂吧，嗯，好，那这样的话呢，我们就把这整个就写好了啊。真正写的时候是那个组件和这个一起写。什么意思？你说我要去写个它，马上我就要写什么action，写完action action去吊调mut。对不啊，是连在一起去写的，好，现在我们来看一下我们当前这个行不行是吧。

行。效果应该还是以前的这一个效果啊。把控台打开。啊，我们的控台里面不有的这一个工具，呃，这个工具里面默认就包含了。6X。啊，来刷新一下先。有了吗？是不是能识别了啊，能识别来看一下啊，看行不行。点一下加号行，而且他观察到了，这是在观察谁了，大家看到。观察musictation调用，你看我调了一个什么？有没有看到我管理的状态变为了几？一，我的get的结果是什么级数？我有这样一个mutation，看到了吗？第二呢，是这样一个tation，它的table。

我们解决是它的名称是不是就是我写的这个大写的，好，来再来一次，各位这都有记录，你看呢，前面还可以看到以前的状态。很轻松，好，下面写一个有没有有有变化，没问题，好。增不增加，增加多两项吧，好，这一次我点它会不会多一项。不会啊，懂了吗？没懂为什么没有增加，就为什么这个没有多西项，它本质上没有增加是结果，其实就是因为我没有去调用每个函数啊，没有去最终去执行。对吧，因为我是达到某一个条件，是不是才提交这个mutation对不对，如果我没有提交mutation，那我的mutation会调用吗？不会。

好，接着这个我点的时候会马上增加一下吗？不会。对吧。嗯。其实VX的编写啊，还是很非常非常干净的，而且你把它收起来以后，你就觉得结构就这几个结构，写来写去就这些。固定的。啊，有的时候就是一个设计的一个思路，其实是能够很大的影响你这个编写难度大，还是要轻松啊。非常好用的一个东西啊。好，行。