018-尚硅谷-尚品汇-vuex模块式开发

哈喽，各位小伙伴们大家好，那接下来啊，咱们呢，去聊聊V叉状态管理库。那么在聊VE叉之前啊，这几件事啊，你得知道，那咱们呢，也去做一下笔记，比如说第一个问题就是VE叉它是什么，那这件事儿你得知道。那首先说啊V叉它是一个什么呢？是官方哎提供的一个插件，就比如说VI-routeor，他们也是官方提供的一个插件。那它是什么呢？它呢是一个状态管理库。其实如果说啊，你有框架的基础啊，那你应该很清晰，类似于react框架当中的这个。那么这个VV叉它可以干什么呢？就是集中式管理，哎，项目中。

组件共用的数据。你可以把VR想象成一个大仓库，那么项目当中共用的数据你给它放到咱们的仓库里面，那么项目当中的组件谁想用，OK，你就去找仓库，找VR要就可以。对吧，那这里呢，老师呢，也给你们画一个图，哎，咱们也看一下。那首先说啊，并不是所有的项它都一定要用V叉。咱举个例子。就比如说啊，有很多这样的DEMO，比如说写一个to do list。那像这种简单的项小项目，可能它本身就一到两个组件。组件与组件的关系啊，它不复杂，数据呢也好管理，那当然你就可以不用VI。那假如说你的项目很大。组建了很多啊，这个老师画图意思一下对不？就比如说你的项目很大。

哎，组件很多，组件与组件之间的这个关系啊，还比较复杂。那像这种情况下，你再想到谁，你再想到叉。那V叉是什么呢？哎，咱的就比如说你把它当做什么，当做咱们的项目。那这个小圆球呢，你可以当做咱们的VIVO叉，就是咱们的仓库。那么如果组件过多，模块过多，那你的数据呢？数据量一定是很庞大的。那所以说数据呢，是很难怎么的，很难去管理的。所以说当项目大的时候，OK，你要想到一个东西，就是view差。他呢，可以集中是管理咱们的数据。对不，哎，那这块呢，老师呢，也画一下，就是这里面是什么是数据。那么项目当中。有很多组件，那这些共用的数据啊，你就可以存储于V当中。

我不管你是张三还是李四，我不管你组建之间是什么关系，OK，你都可以找咱们的VR需要数据。对吧，所以说这件事儿呢，一定要注意一下啊，那这块呢，老师呢，也做一下笔记，这块呢切记。哎，并不是，哎全部的项目啊，哎都需要叉。你得知道什么时候需要维维他，那就说如果你这个项目很小。对吧，那就完全不需要谁啊，不需要V。那么如果项目很大，那么组建很多，那么数据呢，它也就很多。对吧，那么如果出现数据的这个维护，哎，很费劲。对吧，那你就想到谁想到叉这个仓库去存储数据。而且呢，如果说你有VIVO的基础，那你应该知道VIVO叉呢，有几大核心的概念。

比如说state。仓库存储数据的地方，比如说MU patients，对吧，Musv修改的手段。以及还有相应的actions以及gets，当然还有叫modus，模块式开发等等。对吧。那所以说啊，咱们呢，先去看一下的VVX的一个基本的一个使用，因为咱们的项目当中啊，也是要通过什么呢，通过VV叉去哎维护这些数据。那所以说啊，那咱们的项目当中，目前是没有VIVO叉的。那所以说啊，咱们呢，先去安装一下。对吧，那咱们呢，安装一下CD啊走CS。那么CNPM因此到杠杠C咱们的voe叉，那所以说咱们的先给它安上。

那么安完之后啊，咱们呢，看一下咱们的package啊，确保一下咱们的V已经安上。那么VV叉目前最新的版本是3.6.2。对吧，那接下来咱们的去看一下的VR的一个基本的使用，对吧，9.2就是VR的基本的使用啊。那咱们呢，得在项目当中去配置，咱们的仓库没有一叉。那需要在咱们的src目录下新建一个文件夹。比如说咱们呢，叫做死道。Store这个单词呢，是有仓库的含义的啊，比如说遇见了store文件夹，要注意一定是和VR相关的。对吧，那在这里呢，咱呢可以来一个index.gs。对吧，那咱呢，就得写没有差的东西。那首先说啊，VVX呢，是VE框架当中的一个插件，那你要使用这个插件呢，得V1.use一下对吧，那所以说咱们呢，先引入谁呢，先引入咱们的vuee。

对吧，谁呀。那以及呢，还需要引入咱们的view叉，那就是import，咱们的view叉for from谁呢？咱们的view叉。那这里呢，要注意一件事，那咱们需要哎，需要使用插件一次。那也就是voe.use use是谁呢？咱们的VO叉。那这里呢，要注意一件事。V叉呢，其实它是一个什么呢？是一个对象。对象的身上呢，是有一个死道这样的一个方法的，而这个方法呢，是一个构造函数。可以去初始化咱们的VV仓库。那所以说啊，咱们这里呢，需要注意一件事，什么事呢，就是对外暴露啊，死道类的一个实例。

那就是export default，谁呢？New，一个view叉点，Star这个类的一个实例。但是呢，要注意一件事，那这里啊，咱们呢，是需要传至一个配置对象。那配置对象呢，咱们呢先搞一下。那首先说啊，这里面呢，咱们先把一些基本的核心的属性呢，去看一下，比如说stay。哎，那state呢，它呢是仓库存储数据的地方，也就是所谓的状态。那以及还有谁呢？还有mutations we修改stay的手段。那以及还有谁呢，X？以及还有相应的GS。对吧，那当然这个是个配置对象，那这里面的K你不能瞎写，不能胡写，更不能乱写。

当然像这种写法咱们可以换一下，比如说在这儿对吧，正好做一下笔记。那首先说stay是什么？是仓库？哎，存储数据的地方。你看，比如说咱来constant state，他要的是一个对象，这是没问题。对吧，那以及还有个谁呢，叫做mutations mus。这是什么呢？是修改。仓库的数据写下修改state的唯一手段。也就是说你只能通过mutation去修改咱们的state，对吧，那你说cost，咱们的mutations它也是一个对象。那以及还有谁呢？还有这个叫做actions。对吧，就是处理action的地方AC啊T，因为可以派发action，派发一个action。对吧，那么ACTION1触发，OK，那它里面的相应的方法就会咋就会调用，而且呢，咱们应该知道action里面可以干什么呢，可以，哎，书写。

可以书写自己的业务逻辑。以及呢，Action呢，也可以处理一步。对吧，哎，这件事得知道那一集啊，咱们来一个cost，比如说叫做action。那以及还有咱们的gets gets呢，你可以理解为什么呢？理解为，哎，理解为。哎，理解啊为，哎不是理记为啊，是理解为什么计算属性。其实gets在项目当中啊，它更多的是用于什么呢？用于哎，简化咱们的仓库数据。对吧，让组建获取仓库的数据更加方便啊，更加方便。那当然啊，咱们的目前呢，也不会太去，呃，更加啊，也不会太去操作gets，但是得有对吧，那再来一个呗，Count的一个gets，它也是一个对象。

那当然，这里面呢，你需要进行相应的注册，State，哎，Mut以及action和gets。对吧，那当然啊，这块呢还没有完事，你需要在入口文件去注册一下咱们的VR仓库。那所以说啊，咱们呢，回到咱们的入口文件这里，那咱们引入一下仓库对吧，那在这儿咱随便找个地儿引一下，对吧，引入仓库。那就是import咱们的store啊，From从形这里呢，点杠store啊，或者at-store也行，这不就at-store下这个index JS。对吧，那像路由一样，你也要注册什么呢？来注册咱们的仓库。就是star。

但是啊，你要注意一件事，当你书写上这行代码的时候，你要注意一件事儿，就是咱们的组件的实例的身上，哎，组建斜下。组建实力的身上，哎，会咋的会多了一个属性。叫什么呢？哎的呃呃属性。对吧，就比如说咱们应该常见的，比如说呃，this.dollar store.despite那不就来自于呃，Dollar store。对吧，所以说这件事儿你要注意。那咱们呢，运行一下，看一下咱的项目目前有没有问题，应该是没有问题的。对吧，那咱们呢，先去聊聊这个VR的一个基本使用，就比如说啊老师呢，现在呢，想在home模块下看着啊。咱找一下咱们这个home组件。老师呢，现在呢，把这块呢，我都先给你干掉，咱先给它注释上啊，老师呢，现在呢想去做一件事儿，就是在home模块这啊，咱想写个计数器啊，来一个两个按钮点击加一，点击减一啊这样的一个套路。

对吧，那咱可以来一下子走，那这块老师给他搞一下子啊，就比如说啊，咱来一个button。对吧？B button，比如说点击我，哎，点击我加上。对吧，那咱们再来比如说button。再来这是点击我，哎点击我怎么的，哎，减去一。哎，减去一。那以及呢，咱们的当然你中间得来一个数字的，再来一个SPA的，对吧，比如说仓库的数据，仓库的数据，那当然咱们现在仓库当中是还没有数据。对吧，咱就来一个小小的一个，呃，累加器这样的一个小案例。对吧，那举个例子，比如说仓库当中啊，现在它有一个数据，咱们找一下仓库。

对吧，那数据咱给他来一个，比如说呢，咱们叫做抗。值为几呢？比如值为一，那仓库当中已经有数据了，那咱们的组件呢？想获取到这个数据？那怎么办呢？那咱们需要用到咱们的辅助函数map。对吧，Map。Stay from，从谁那儿也能从will？对吧，那映射为组件身上的数据，那这块呢，你就得咋的了，你就得计算属性。对吧，那所以说咱们在这搞一个叫做comped啊，单词千万别错了comp。对不点点点map state。对吧，传传数组，那不就是咱们的这个叫做count。那咱们先刷新，你先看一下吧，在咱们当前home组件身上有没有仓库的数据，对不？你看是有的，看到等于几等于一，而且这块是vuee绑定的，V叉绑定。

对吧，那所以说咱们在这儿呢，就可以使用这个数据，比如说仓库的数据是这个抗。对不，那咱们可以看现在是不是就是一。那举个例子，当老师点击这个按钮的时候，比如说点击我加上，那你是不是应该通知仓库view咋的，把这个数据stay的这个count值加几，是不是加一？那所以说那咱们呢，需要给他绑定一个单击事件，比如说艾特click。比如说这个咱们叫做ad，那当然咱们目前是没有这个方法的。那你需要书写一个，那么找到咱们的methods。对吧，IMY，那这块再来个叫ADD，那当你一点击这个按钮的时候啊，会触发这个回调，那咱们先弹一下你看嘛。对不，那你要干什么呢？那咱们应该知道是不是应该派发action。

对吧，哎，派发action，你看比如说这点Dollar store。第二，Dispatch。对不，你要干什么，你是不是要修改这个这个这个count，比如说咱们就叫做啊ad。对不，那当然，现在当你一点击这个按钮的时候，VR会给你一个啥警告？啥意思呢？说大哥我不认识这个action叫ad的。那所以说你需要回到咱们的VV仓库当中。对吧，你去书写这个action，但是它的名字必须和这相同。对吧，啊，那这个咱们叫叫A，那你在这里要干什么，这里一定要注意，这里面可以书写你的业务逻辑，但是不能直接修改谁修改state。这块一定要注意，比如说这里。哎，可以。书写业务逻辑。对，不，但是不能修改state，唯一能修改state的地方只有mutation。

对吧，那所以说咱们这要干什么，你要提交mutation，让mutation进量进行修改。所以说这不就是咱们前面所提到的三连环嘛，对吧，所以这块咱们可以解构出commit。对吧？Co MIT去干什么，去提交咱们的commit，对吧，比如说叫做AD，那你要干什么，那你是不是要通过这个mutations叫AD的，是不是要修改state的数据。那这里面会有谁？State以及还有谁呢？还有这个。那这块你就可以怎么办？stay.count等于count。对吧，哎，或者是要state.com加加。对不，哎，因为咱们也没有没有带参数对吧，那所以说你可以看一下Z，当你一点击的时候，是不是仓库的数据进行加一，那当然它也是一样的。对吧，所以说这是咱们把当年VE基础的这一部分稍微咋的啊复习一下。

但是这里呢，老师呢，要说一件事啊，咱讲的并不是想讲V叉的基本使用，咱想聊的一件事是什么呢？就是VI叉它可以模块式开发。咱们先看一下开发者工具啊，看一下VV叉这里啊，你看啊。你琢磨现在他这玩意儿对不对，老师问你啊，你看啊。这个是咱们的mutation。Action和state。对不，现在老师想问你一件事啊，你看啊，现在这块它是一个死背，咱做一下笔记啊，你看。看这9.3。9.3。就是什么呢？VIEW1叉，它要实现什么呢？VIEW1叉。哎，实现模式开发。咱要聊的是这个，举个例子啊。如果说你现在的这个项目很小。

你的仓库当中啊，它的这个state是一个对象。对不？你看咱刚才也看见了state，它是一个对象。对象这里面的存储的呢，是仓库当中的数据，那咱现在存储是一个count等于几等于一啊，那老师问你一下。那假如说将来的项目，你看咱说一下这是谁模拟，谁模拟这个state。模拟state存储数据。但是你要想明白一件事。那么如果项目过大。对，不过大那么组件过多。哎，过多对吧，那就是数据啊，有时接口很多，接口也很多。对不对，接口他也很多啊，不是进口是接口。哎，接口也很多。当然那数据他也很多。那老师问你啊，那假如说将来还有100个模块，除了有home还有啥，还有色侈，还有底，还有购物车，还有支付，还有详情，还有很多很多模块，还有很多很多接口。

那你向服务器发请求，服务器的数据回来之后，老师问你，你都要存在这儿吗？那就比如说色置也有它的数据，比如色里面是个对象，对象里面有AA等于一。对不完了之后比太模块这块也有它属于自己的数据。对不，完了之后，比如说总共有100个模块，完了这块，比如咱再来个支付，支付模块。对不？你要这么搞，你的state存储的这个数据啊，它有点太多了。什么意思呢？就假如将来你有过多的模块，你这个state，它这里面要存储的数据可能一下子吧存100条。在100条数据你翻看的时候，咱就比如说好不好整了，你就翻看的时候他也费劲。对不，所以说V叉当中啊，他提到了一个概念，什么概念呢？就是V1叉，它也可以经模块式开发。

对吧，所以说如果项目过大，数据过多，你可以怎么办呢？哎，可以。让VE叉哎VUE叉实现什么，实现模块式开发。啥意思呢？就是把大仓库的这个所有的数据原来可能是这么写的，你给他怎么拆分成很多的小仓库进行存储。啥意思？你看老师给你画一个图。就举个例子。比如说这是咱们的项目，项目里面呢，有很多模块啊，有很多模块老师这就不再一个一个画，咱就假如说有很多模块。啊，有很多模块。你正常你是把数据存储到哪，存储到V当中。Vue叉当中呢，它是有state的，那当然你可以用一个state去存储。但是如果你要这样存储数据过多，导致数据很难管理。

那怎么办呢？哎，人家VIVO叉很聪明，就是你可以把这个大仓库拆分成很多小仓库，每一个小仓库对应着存储箱模块的数据。对不？对不对啊，就举个例子，你有三个模块，OK，我拆分出三个小仓库，分别存储每一个模块的数据。那也就是说把一个大的一个仓库，这画的好像一个人了是吧，把一个大的仓库拆分成很多小的仓库，分别存储箱模块的数据，那这样好管理。对吧，那所以说咱们的项目将来模块很多，除了有home detail search，还有很多。那所以说咱们这里呢，需要啊，把这个仓库的数据啊进行模块式存储。就说白了，把大仓库变成小仓库啊，变成多个小仓库去按模块去存储数据。

那所以说咱们这里就不能这么写了，你看老师给你搞一下子，咱周二给他干掉了，就这。诶，那当然这里呢，咱们也干掉了，那以及还有哪呢？以及还有咱们的这个APP，不是是这个home当中，咱曾经刚刚写过的这些东西，咱都给他干掉了啊这儿老师也给他打开了。那也就是说，辛辛苦苦几十年，一觉咱就回到解放前了。对吧，当然这里咱们也不要了啊，这都不要对吧，这不刚刚写的吗。对吧，那所以说怎么去实现V叉模式开发呢，怎么把小仓库变为啊，怎么把大仓库变为很多小仓库对应的模块去存储数据呢？那很简单，你看老师告诉你怎么搞，你看这。举个例子。比如说啊，咱将来开发的都有哪些模块呢？比如说home首页。那以及还有谁呢？还有搜索页，当然还有别的页面啊，模块很多，那你可以啊，把每一个模块你都给它来一个小仓库。

你看啊，老师在这儿给他建个小仓库，比如说啊，这个是home的小仓库，只负责home模块的数据。对不，那以及咱们再来一个，比如说还有谁呢，叫做色程模块。对吧，那这个小仓库只负责设置模块的数据。那当然，这里面你得有相应的JS文件。每一个小仓库，你务必得有四个核心的东西，State mutation actions。对吧，那所以说咱们写一下这是谁呢？这个是比如说就是search模块。的小仓库。对吧，哎，那咱搞一下，那你就是他得有谁看。他还是得有存储数据。那以及还是得用mutation。对，不，那mutation干什么呢？是唯一修改state的地方，那以及也得有什么该action。对不，那也得有什么呢。

当然你这个模块你写完之后只是四个常量，四个对象，你得需要对外暴露，你不暴露别的模块怎么用，对吧？Export default对外暴露一个对象，捎带角把这四个一起对外暴露，State。Action mutation啊啊，当然这个咱按照顺序来吧，你不按顺序也行，Mutation。Action和GS。对吧，那以及咱们的home模块应该也有属于自己的小仓库。对吧，当然咱们这里改一下，这是谁，是home。但是呢，千万别忘记，你现在只是写了两个JS模块，JS文件，你需要把这两个小仓库啊合并到咱们的大仓库当中，就是这个in desk store下的这。对吧，你需要合并，那首先说在这儿你需要引入咱们的小仓库。你可以理解为小仓库对吧，In。

比如说有谁呢，有这个后。From谁呀，咱们的点哎点杠home。那以及还有谁呢的咱们的这个search。From谁呢？比？那这里面呢，需要注意一件事，那这里这行代码就实现什么呢？实现。V叉哎，仓库模块式开发存储数据。叫什么叫modules modules它是一个对象，对象里面呢，需要注册你相应的小仓库，有home，还有谁呢？还有search。那咱们呢，运行一下子，你看一下子有没有问题对不？哎，OK是没问题，那这回呢，你再看一下的开发者工具，你再看一下，你看咱们看下V叉。那也就是说现在的这个大仓库。它存储数据的时候是分模块，你home模块OK存储在home仓库当中，你色模块存储在色成模块当中，咱举个例子，你看比如说home模块我存了一个数据叫A等于一。

对不你呃，设置模块你存了一个数据，叫做BB等于二，你看每一个仓库都会存储属于自己的数据。说白了，就是把原来的大仓库拆分为小仓库进行存储。那咱们呢，也可以在这儿做一下笔记，就就说如果你没有模块去开发，你可能是所有的数据全放在这儿。那如果说是模块是开发的，那就很简单了，这是大仓库的类，每一个模块存储自己相应的数据，对吧，比如home存储home的，还有谁呢？设存储。对吧，啊，当然有的同学可能说老师那我不模块式开发行不行，行，但是你这里面的数据可能很多，很难管理。对吧，所以说呢，咱们让他怎么让每一个小仓库非呃对应的负责相应那个模块的数据，那这样更合理一些。

对吧，那所以说呢，这里面呢，咱们的稍微聊了一下，咱们的VI的模块式开发modus。那当然V当中呢，人家官网当中也是有相应的解释的。咱们呢，也可以看一下对吧，这几大核心概念，其中有个叫modus。对不，你看嘛。由于使用单一状态数，就是咱最开始的写法，就讲那个抗字的时候。对吧，应用的所有状态会集中到一个比较大的对象上。那还是那句话，模块过多，数据过多，那你所有的数据是不是集中在一个对象身上，那当应用变得非常复杂时，你的到对象就有可能变得相当臃肿，很复杂。所以说咱们把大仓库分割为小仓库，清模式，模块式化管理。对吧，而且人这也举例子了，这是A模块，这是B模块对吧，那你可以把这两模块注册到modu，就相当于在大仓库当中，是不是注册一下。

对吧，所以说这是咱们讲了一下子V叉的一个模式，开发modus的一个应用。