63_尚硅谷_Vue__vuex_counter应用(vue版本)

好，那今天呢，我们要去讲一个新的东西。叫VX，其实它很简单，大家大都学过了啊，难关已经超过，已经过了，等会你就能看到他其实写起来很舒服啊，好。在去准备讲之前，我们最终呢，是通过两个案例来去驱动的啊，我们有个计数器，这个计数器的案例大家以前做过。对吧，那时候我们好像比这个还做的复杂一点点。因为那是我们加了一个什么，还记得吧，呃，这里面也有一步对吧，加了一个指定那个增加的数量有123。对吧，而这一个呢，是每次都什么加一减一。这里面一共四个操作啊，点一下加号加一，点一下减号减一，第三个呢是什么？如果是奇数才加一，这个呢是异物所说的义务，就是一秒之后才加一，能不能啊。

啊，我们以这个案例来去驱动我们的学习，那先呢，我们用U来实现一下这个效果，这个其实非常简单，我们来去写一下。呃，那首先呢，我要生成一个工程是吧。我得有个工程才行啊，来这里面刚才我用这不是我发给大家的一个空的项目是吧？啊把它呢解压开来。啊，解压的时候注意，因为我这里面呢，已经有了这个view DEMO，所以你如果直接这么解压。直接解掉当什况样行吗？不行，这样呢，会把这个给他什么覆盖掉。能不懂，那所以我要改一个什么，是不是改一个名字啊，改个名字我当时改的就是UX test，那就生成了这样一个文件夹。

能没有看懂，好，那但是呢，打开以后，诶，这里面是不是多了一层了，怎么办。我要把这一层去掉。怎么操作啊，两个两步操作，Ctrl a啊，CTRLX啊，看见V啊，很low是吗？你有什么高招吗？怎么一下子突然间把它去掉了，没有啊，开玩笑来好，这样呢，我们就做的还有一个事情。大家改以后把这个稍微改一改对吧，这个名字最好改一改，叫VX_test。

好，那现在呢，我们就把当前的这个项目给他什么打开是不是就可以。你现在不用想着什么VX，咱去做刚才这个功能就行。就这个呗，是吧，好来，我们现在来去写它，把有些东西给干掉啊。嗯，哎，就在这怎么了。嗯，把这个图片我们不要了，把这些东西都删了啊。哎呀，这都写漏啊，别让他去处理了。来我们来看一下啊，说一下啊，这个也给它干掉得了。嗯，我们看啊好，现在呢，我们主要是要去写的是就写它不就得了吗。

对吧，诶现在应该是那个看看。哎，怎么他还在还在进行处理吗？我点不过去是吧，我直接打开一下吧。来，我们看一下。写它首先把这个模板是不是写一写，这个好写啊，非常简单的事情，把这一片都去掉。把这个ID也去掉。In是吧，当然有的时候如果报了红色的，这样波浪线放到上面看一下。把这个。嗯，E给它去掉检查。就这个。好来，我们来去写一写啊，这个里面的都不要了。嗯，这都不。这些也不要了，没用啊。好，上面呢，假设是一个P标签啊，它是点击多少字，那个数量是奇数还是偶数是吧。

啊，就是多少次了，这个是不是一个变化的值啊，OK，多少次times。多少次，而而且那个次数啊，次数是一个奇数还是偶数，这也是个变化的是吧。能不能看到。好，那变化的值啊，这个里面我们是不是要对它们，譬如说这个我们可以去用一个变量是不是来去显示啊，我们可以搞个什么count。可以吧，可以，那是奇数还是偶数啊，假设我们也搞一个啊，叫even。Order啊，奇数还是偶数不是是对吧？Order啊，因为order都一样啊。

能不懂？好来，下面我们要去定义一下。首先哎，这上面还有一，还有几个按钮是吧，还有几个按钮写一写八，这个是个加号，这个是个减号啊，还有两个。嗯，这一个。叫increment if。对吧，这一个是cment think吧，模板写好以后，下面我们要写这个里面的东西，首先提供一个什么date。对象，而对象里面应该是不是有一个count count的初值为什么零，而这一个是写在date里面吗？不是，因为这一个不是奇数，就是偶数那个两个文本，而两个文本是不是由count来确定，那应该是个什么计算属性嘛，看对吧，其实这个计算实很简单啊，就是说Z点。

Count。模拟二等等于零吗？如果等于零，偶数对吧？否则奇数。这个能不能啊，这是比较简单的。好，下面我们这四个按钮是都会有对应的。At，这个是不是要增加呀，我们用应该列叫increment。懂不懂，好下面类似的吧，啊类似的叫什么。

对吧，好后面的几个来。Incment if order，好，再来一个cment。对吧，好，下面的事情很好吧，来一个什么，哪个对象，接着一共是四个方法，对吧，来。四个，诶，这里面逗号写上再去整。对吧，好，稍微的把名字先改好，等会别忘了。If。I think。能懂吧，第一个是增加对吧，增加来。

我是不是要先取到这一个值来对它进行，是不是加一啊，怎么办呢？啊，先取到值吧，啊count等于this.count取到原有的值吧，接着啊，This点看更新吗？因为这个简单，我就不再写注释了，还是慢count'加一。加加是吧，这个加一太多了。啊，这一个要什么是不呀，你要你要在这上面加，那就必须得是它了啊。这样好像我加一是不是这个没有必要变，其实本身对吧，能懂吧，就加加以后啊，你加一以后就好了吗。这行吗？这行不行不行啊，这个加加的话，而且应该放在什么，如果是加加的话，应该放在前面。

对不对，能懂不？你要放到后面是什么意思，先赋值再加，但你加的是这个变量啊。对吧，所以啊相还是用加得了。能不能看到，因为我们要去改变的并不是这个抗的这个变量本身啊，通过这个事，你要对加加左边和右边要区别开来啊，这是个基本的语法对吧，好，这个。类似的吧，啊看干嘛减一对吧，下面这一个。啊，先取也是先取出来对吧，但是呢，先得什么判断一下我的这抗的模一啊，等等于一吗？不奇数吗？这一个是你看到这里面一共有这么几个，这是减少对吧？这个是如果是什么奇数啊，才什么是不是增加一啊，都是加一，我就说增加得了，那这里面是不是要等等于一啊。

怎么着，把这一个不拿过来不就得了吗？是这样的吧，好下面啊，这一个是什么啊，是一不增加，也就是说过一秒。才什么是不是才增加啊，才增加来吧，啊，那我就上来来一个什么setout。对吧，来个进函数。来一个1000把刚才这段代码。看懂不但你这一段，这一段是不是可以放到外面都可以可以的啊，就是这样一个事情啊，其实非常简单一个事啊。

好来，现在来看一下我们的功能是不是已经实现了啊，百度外卖这后面我们要做的东西。来，我们来去看一下我们当前的运行起来。NPM地位也可以start。这其实是一个比较基本的功能。它默认应该是没是没有启动那个。呃，浏览器，那我应该是什么，8080问一下吧。可以吧，好可以来啊，点一下找你找你可以吧，减一可以好能增加吗？来对吧，能增加吗？不能好E不增加。

各位可以啊，过一秒以后增加，这是一个比较基本的功能啊。