69_尚硅谷_Vue__vuex_todolist应用_创建vuex结构

下面我们来去做另外一个应用，这个应用呢，我们版本写过。大家看一下说的还是我们前面那个那个例子，就是我们要把它改造成于X的版本，对吧，其实本来来说我们这个前面写的这个count应用完全没有必要用。V，为什么呢？回想一下我们VX用来干嘛的？管理多组件共享的状态，一上来就不对，我一共就一个组件。对吧？啊，那这一个例子啊，也是官方提供的第一个那个计数器的，他是想演示一下语法怎么用。能理解吧，啊，就涉及到哪些东西啊，并不想把那个事情呢搞得太复杂。

啊，下面呢，我们就稍微复杂一点啊，去做我们那个to to。啊，我呢，先把我们那个。View版本的代码给它copy过来。好，那这个呢，就得改一下名字了是吧。看能不能改名啊SC杠这个是那个什么come。哎，可以改名是吧，来把我们那个。Sc to60，诶把这个杠TO60给了什么去掉。啊，但这里面有好一些啊，好几种是吧？呃，我我去找一下那个看看，看一下确定一下用那个pro这种方式就行。这都没关系，就是这是最基本的。把这些都干了。这后面有版本的啊，来这个里面用的是commons啊，里面的一了commons，把这个一改成去掉。

是吧，好，先我运行一下啊，看看它能不能正常运行啊，先得保证它正常运行啊。现在是运行着了，对吧，看看它能不能识别到啊。难道已经识别好了吗？我不知道，我要确问他是啊，这他是的话，我稍微改一点，改一点文本看看他，他诶看哪哪个地方有有photo。改一点文本啊，譬如说我我这地方加加一个杠杠，看它能不能识别，诶能是吧。是吧，可以啊，就说白了，现在的版本是完全没问题的，大家看一下啊，我去操作是吧，啊刷新还在。对吧，啊，没有任何问题好。

下面我们要去改造改造，也就是说我们先分析一下我们当前是不是有一个todo的一个状态数据。而且是多组件共享。对吧，这一个状态数据就应该交给我们的什么X的管理，你就放到多里面去是吧，啊多就是VX的管理者嘛。没问题，好。来啊，把他们关了。把这个放下去。那现在我们是不是要去写一些VX相关的代码呀？对吧，对，前面呢，我们写的比较简单，是不是直接在下面建一个多文件多的模块，而这个模块里面是不是把相关所有的这四个组成部分是都写在这个里面了。但真实的项目呢，就基本上不会这么做了。

而是会把他们那拆分成不同的模块，比如说我会写一个gets，会写个actions，会写一个mutations啊，或者说会写一个state。专门，也就是说我会多出四个文件来。能听懂吗？啊，这样避免我们这个文件越写越大，大家知道真正的项目里面肯定东西很多呀，不可能就这么一点点是吧。那我们这么做。一般呢，我会这样，在这里面先创建一个文件夹。啊，创建一个文件夹啊，我就叫他多。可以吧？啊，创建一个多，因为我整个就是要有一个多，我这个地方呢，写一个入口的JS index。和这个音带还是以前那个就是十度啊，就是VX，还是那句话啊，就是VX啊，最核心的什么管理对象谁十度。

看到吧，啊OK，除我这个文件夹里，除了这个index，还有其他的几个模块JS哪些了，这个名字最好不要瞎写。State。啊啊，OK，还有什么大家觉得。啊，对啊，看见C看见V啊，Actions操作state的是mutations对吧？操作mut的是actions，还有一个计算属性get。能不能看到就拆出去嘛，这其实也没什么难度啊，而我这个其实跟以前的写法也没有太大两样，说实话。再来写一遍啊，引view对吧，入V啊V什么X。

没问题是吧，接着还要引入是不？刚才我另外定义的四个模块引入是点斜杠state对吧？引入mutations啊，名字尽量不要写差了啊mutations，因为等会配置的时候有用。啊，引入什么。点action是吧。好像还差一个呀，引入gets。明白了吧，好，最后啊，哎，先要做这件事情，把这件事别忘了柚子。View。X对吧？Export def6view X点大写的尺度传配置。

State。Muts actions gets。就跟以前差不多吗？跟上午写的是不是基本上一样啊，只是说把它单独拿出去而已。而我们的这个store对象是不是需要配置一下？这个十多对象，当前我这个是多对象。啊，在里面。啊好，这个语法好像大家还没学过是吧？啊，没学过没关系，等会就说啊。来引路，多from点斜杠十多。是吧，这不index是吗？来配置上是吗？啊等会我后面把这个讲完了，我就跟大家说这个啊比较简单啊好。

那也就是说十多对象是不是配置好了，基本上我的这个这个index这个是多就不用再动了。能理解吧，就不用用了，要写的是不是他们了一个来对不对啊，这个是状态对象吧，啊态对象OK，那里面的写法基本上都是固定的，我告诉你，因为他们都是一种类型。对象什么意思了？你看我这个是state是这么写，我mut我也这么写。刚不说一样吗？这东西为什间就他一个一个套路啊。对吧，啊。