70_尚硅谷_Vue__vuex_todolist应用_header组件

我们把那边的注释慢慢改啊，现在我们就要决定我们这里面到底要管理一个什么样的状态。先说我们以前有个什么状态来着。是不是有一个todo这个状态对不对，那也就是说这个还需要吗？不需要了。能理解吧，那也就是说把它什么。是哎，移错了是吧，移到state里面别搞错位置啊，嗯。对吧，啊下面。啊，下面要说的是，也就是说我这现在就啊已经确定了不用动了，关掉是吧？啊这个也确定了，关掉不用了。好，下面我们得一点一点的去整他们，就是一个是mutation，一个是action gets，慢慢写，这个没关系，需要的时候写啊，这个怎么写呢？这个啊，我不会一上来就在这里面想怎么写怎么写，需要的时候就写。

啊，我去看我的主件啊，看我的主件来。嗯。呃，这个组件里面现在有一个还记得这个东西干嘛的吗。是不是去用通过我们的这个存储的工具对象去读local storage里面存的那个to啊。啊OK，这个呢，我们可以先放着啊，先放着后面再跟大家去说这个事情啊，把它隐藏这个里面，所有的方法都不需要了。嗯。对，不干了得了。不要了。看懂吧，啊，这里面后面肯定还是后面哪个地方还是要握起来，我把这个隐藏掉啊，这个隐藏掉啊。不干掉是因为后面这种耐量可能用好，来看下上面的什么个意思呢，我们以前是不是老传函数啊，不用传了。

能看到传函数，传什么todo，不用传了。啊，这里面所有的这个函数这个todo，因为这个todo现在在那个VX里面。所有的组件都可以见。能找吗？你需要你去取。能不能理解啊，不用再穿了，就这样。那也就是说现在我们一旦用上v Xu，我这个APP是不是很干净很纯洁是吧？OK，就看起很舒服啊，对不对啊，OK很好。嗯。She。那下面啊，下面我们要去针对是不是这三个组件一个一个去改呀。就需要什么加什么，现在我肯定还有东西要写啊，因为我东西都是空的，现在还没写了，对吧？啊，需要的时候再写啊，成套成套的写啊，来我们现在来看头部。

啊，头部这一片这个还需要吗。不是，我都没传你要了，你不是祸害吗？好，这里面说一个是我这个组件里面是不是有一个input todo这样一个状态，那有人看到老师，我们要不要把这一个date数据放在这个VX里面管理呢？啊，这个就要说什么样的状态需要放在VX里面管理。多个组件共享的状态。对吧，而这一个状态只是当前组件内部使用。懂不懂内部使用，就没有必要去交给VX管理。吧。OK，这是内部组件。内部使用的状态。不存在共享对吧，共享的问题。结果是什么？就是这是一个，这是一个事实，那导致一个什么问题呢？

我们就可以推测出来，不需要什么使用VX管理它看到吗？说白了就放在这里就行。能不能理解好下面。我们这里面是不是最后有一个爱的呀，添加前面这部分都不要用，主要变的是这里。好，那也就是说我现在是不是要将todo添加到todo里面去，把todo添加到todo todo是谁管理的？是VX啊，那也就是说现在我是不是要去想办法通知VX来去更新状态。那这个时候要用一个什么语法呀。是不是dispatch啊，时刻啊，大家要看着这个图。能不能？

我要更新状态，是不是现在这样一套流程？对吧？那我们现在在这个地方需要做的事情其实非常简单，This点多了福store.patch。第是不是要指定action的name对吧？那应该给它取一个什么名字，你要设计个名字，这是你需要设计到。哎呀，这还要想什么呢？能不懂to do，好，那我要不要给他传递数据？要不要你要把谁传过去，我就对很好把它传过去。能懂吧，能懂啊行，那有了这个以后，下面就要说，我写完这条语句以后，永远固定的会写某一个文件。

哪个文件actions？不懂，这是固定，因为我现在不通知action调用嘛，Action写的吧。没有了，还没有对不对。OK，就是这个啊，这个呢也是一个对象对吧，但这个肯定不是状态对象了，对不对啊OK。接收啊组建通知对吧，调触发。谁调用？Mutation调用啊，Tation调用间接更新状态。光。这包含多个。哎，这里面啊，别看这一系列说明了很多事情，首先我的这个里面是一些方法吧。

对不，这个方法由谁来去触发调用。这里面譬如说我随便插的写一个方法，这个方法由谁来触发，在哪里触发它调用啊，在组件里面触发调用。对吧，在组件里面触发掉，只是说如何触发用。对吧，什么意思啊，你要知道两个事情啊，出来一个知道啊，在那个代码写什么代码。你说我要触发这个action调用，肯定要写个dispach调用一下对不对，关键那个代码在哪执行。组件里面，也就是说你需要在组件里面是不是写这行代码，只是代码里面是不是用到这个语法。所以你要知道两个是你光知道用dispa不够。对不对，你还要知道，我要把它这行调用的语句写在组件里面对吧？啊，自己写在哪个组件，那就看是哪个组件里面去触发的呗，对不对，好来。

那我这个名字能这么写吗？不能啊，得看谁了，看这个吧。是吧，啊好，那也就它呗，好这个里面非常固定，写一个大括号，写一个com。对吧，在里面干嘛去。啊com com是不是提交啊，提交一个mutation的请求啊，叫提交。嗯，对mutation的是吗？请求就是想办法请求触发一个mut调用是吧？好，那这里要指定什么。名字对不对，指定一个名称MU型的是不是name目呀，好，这个类目一定要跟我们这一边函数名是不是要一致。

啊，这个时候两个文JS文件里面，他们是不是有一个名称对应的关系啊，我们一般会写一个专门的常量模块，其实在Rex里面也这么做过。对吧，啊，OK，那时候是不是写action types啊啊，那这一次我们也写一个类似的叫mutation types。能不能啊，OK。嗯，这个呢，是啊什么呢，Tation的，呃，名称常量。小蜜蜂啊，敞亮。啊，OK，好。应该是所有。好，这个地方来啊，那我们就要有个设计，我们这个地方取一个准备取一个什么名字呢？哎，产量一般是不是都用大大写来写啊。

那个单之间用下划线隔开。啊，这是一个常用的一个用法。好，而这个值这个东西应该定义在哪里呢？是不是这个里面，这里面会这么写。看到不啊，大家我故意的有意的把它只写成小小写啊，不一定这里写成大写行不行？行，我有意的给它写成小写。这一个对应的是某一个更新的操作吧，那什么更新操作是不是添加todo啊，就这。啊，OK，好，放它来，放它以后我的action里面需要什么。是不是引入对吧，Import大括号from点斜杠。美女是吧，来一个呗。

有了吧，有了。关键有一个问题，我再去组建里面提交这个分发这个消息，或者叫。那个事件的时候，他是不是传过来一个数据。但我这个action接收没有。没有，没有接收，你要声明形参才能接收上，其实他给你传了。也是什么意思呢？它调用的时候给你传了两个参数实三过来了，但你现在就写了一个形参。认了不怎么办呢？那你再写一个呀，那写什么名字比较合适。你接受的是什么？Todo，那你写todo。这个名字最好是同名更好一点对吧，好，我这个todo本身我并不用，我要交给谁去交给mutation对吧，那交过去啊。

就除了我这commit，除了提交指定这一个mutation name，同时还可以指定我的什么呢数据。啊，但是不知道还记不记得在redux里面，那个时候他会把所有的数据包装成什么呢，对象。也就是说action啊，这里面其实跟那意思啊，我这里面的action跟mut进行，我把数据从action提交给mutation。无论你数据本身什么类型。啊，你可能既不能行，也可能对象是吧，也可能数组我不管你反正要把你传递数据用一个对象给他什么包起来。能不懂好，那如果我这么写了以后，那我这边下面我写了一个文件句。Mutations对吧，哎，这是包含来跟上面的这个其实很类似。

对吧，很类似，来改改。包含多个啊，由谁触发了。对吧，OK，来看一下啊。由谁出发，由action出发对吧，由action，嗯出发。啊OK，直我们这里面去干嘛去的，直接更新状态对吧。去啊直接啊更新状态对吧，更新状态，哎，刚才是不是没有写更新了。间接更新状态是吧？哎，这里面是什么？直接更新状态一些方法的对象，首先这个对象里面有很多方法，这些方法由谁来触发。X型出发对吧？啊，有X型中出发，OK，那干嘛去了。

直接更新什么状态，那好了，这个时候会用到我们的常量点斜杠。啊，前面我不念了啊，我们有一个爱的todo。是吧，好，那下面我是不是要写一个。啊，来看着玩。我要写一个函数名，就这个是吧，接着呢，这里面接收一个state a，我后面还要接受数据吧，因为我的action这边commit mutation的时候是不是传了数据过来了，那这边写todo行吗？合适吗？不合适。我传过的可不是todo，而是包含todo的一个对象。所以我应该怎么写大括号九，而且这个名字不能写差了。

能不懂我要一不小心写成啊行吗？不行，取不到数据，这是的。因为我这个对象里面根本没有这个属性，对吧？啊，一定要对应起来。里面要干什么？其实啊，非常的简单，那不就是state.todo.push或者是看你放在前面，放在后面了是吧？如果你放在最前面，那就什么on shift。要做的事情其实无比难。能不能看到。那也就是说我们现在啊，大家看到。我们现在从组建开始。到action。到mutation，最终在mutation里面更新状态，是不是做了一系列的一个操作，就做了一套，对吧，这一套是不是用来实现更新的一套。

最终状态一更新，我这不更新状态吗？而我组件里面是不是后其他组件是不是只要去读这个状态是不是就可以了。啊，只是我别的还没写而已，对不对。啊，我们正在写，是这么成套成套写的。啊，就是一个操作啊，一个更新操作写一套，一个更新操作又写一套。