09. 尚硅谷_mpVue_Vuex管理状态，动态渲染页面.avi原创

好，我们继续上课，那么上节课呢，我们已经把vvo X的架子搭好了，那这节课呢，我们把它里边要接管的东西呢全部写齐好，那首先在store对象这大家可以看一下它是不是管理这些东西啊，那第一个state，哎，第一个是state，那state其实就是什么？哎，就是我们初始化的一个状态值对吧？那因为state已经交给了store对象，所以呢，我们在这儿首先应是不是应该给人家把这个初始化的state暴露出去啊，那比如说我们初始化呢，就有个list template，哎，这个模板它对应的是一个空数组，哎，空数组，那其实为什么我初始化一个空数组呢？那因为他上来本页面里边本来就没有数据，那可能在实际开发当中，这个数据是发请求是不是拿到的呀，所以你应该初始化一个数组为空，哎，初始化一个数组为空，好，那state的初始化值状态我们已经有了，接下来我们来看actions，哎，首先呢，套路是一样的，我们还是应该先去向外去暴露东西，那action呢，我们叫它get a list。

好，那这个get list在这一块呢？哎，首先套路是一样的，在这我们是不是应该写一个东西叫commit呀，哎，Commit，哎，这为什么会报错呢？这应该是什么？是不是一个大括号呀？好，那在这里边我们要去commit。Commit是提交的意思，那在这它的作用是去干嘛，是去触发我们的，哎，Mutations，哎，触发mutation，其实我们可以说是触发对应的mutation。嗯，对应的mutation，因为mutation相和我们redu里边是re，对应那个re里边它是不是有多个reducer是一样的呀，哎，对，好，那这个commit呢，在这儿呢，我们要写什么呢？首先我们得明确它要传，可以传两个值或者三个值，那在这儿呢，我们传俩，第一个是不是相当于是哎，Mutation的type，第二个是data呀，那这个type的话，我们通常在这呢，可以写成什么啊，大写就是receive，哎，我们在这是要list数据，对吧？那其实在这是不是应该写一个串才对啊，但是呢，你在这儿要写，待会儿呢，是不是在mutation在这儿也要写。

它俩用的是不是必须要对应才能出发呀，所以呢，这个时候为了避免不犯错误，我们可以在这个types这哎在这去写，比export cost一个他等于什么呢？等于我们的，呃，这一把呢，我们给它换成小写，哎就等于个他，然后呢，在这个actions里面，在这个上面我们是不是可以引入那个变量，比import一个from当前路径下的mutation type，那这个时候在这儿是不是应该引入的它，哎，也就说我们间接的是不是给它定义了一个常量啊，哎，那这样的话，不管是action还是mut里面都用这个常量，能保证它的一致性，哎，能保证它的一致性。

OK，那这个data的话，那其实实际开发的时候，你是不是应该去发起求拿呀，那现在因为我们的数据在本地啊，数据在本地，所以呢，我会从本地去把我们那个list data，就是我模拟的那个数组拿到，那怎么找呢？应该是上一级下边的，我们看一下actions，呃，它应该是什么？这呃，应该是上一级data下边list data，哎，注意list data它是不是一个。

暴露的是一个什么？是一个对象，对象里边有一个属性叫例子贝，它对应是不是才是一个数组啊？而我们要的是不是就是那个数字，哎，所以呢，我们，哎也可以这样去写啊，也可以这样去写，那现在我引入这个list data是不是一个对象对吧，对象里边是不是有一个数组叫list，呃，下划线对塔呀。OK啊，那现在这个东西有了，我是不是可以把它呢放到这里。OK，没问题，那其实我们actions这一块就写的差不多了，然后呢，需要来到T这，那首先我是不是应该还是把呃，刚刚我们需要那个mutation type先给他引入，那在这呢，我们叫它。它OK，那下边的话是export defa是一个对象对吧？Mutations它是个函数，哎，只不过这个函数名它呢是一个动态的。

没问题，那至于说这写啥，是不是取决于我们刚刚这个东西呀，哎，刚刚这个东西OK，那这个东西我们写好了以后呢，来往下来走往下来走。呃，首先这个mutation这这是不是有个初始化的state，哎，那这个是star对象，哎给他的，那在这我们应该是action access是不是传过来的那个数据啊，它本质是不是一个对象，然后我刚刚强调了一下，它里面是不是有个下划线data塔呀，哎，没问题，那在这里边的套路是一样的，我们要去修改状态，修改谁呢？我们刚刚初始化这个list template等于什么呢？是不是就等于这个下划线data就完事了呀，OK，没有问题，那mutation这呢，哎也整完了，也整完了，Mutation也写了gets我们现在用不到啊，用不到，所以呢，我就不写了，Actions这我们也写了，State呢也写了对象咱也写完了，那接下来就是我们要去到页面里面，是不是要去使用，也是拿这个数据啊，那来到list这。

首先要拿那个数据，我应该是什么import。我是不是应该是从VX里面去取一个东西啊，哎，那这个东西呢，叫什么叫map state。对吧，啊叫map state，那这个时候我们想想一共分为几部啊。呃，一共分为几步。那。大家想一下啊，想一下我这个store对象他是不是管理state，那这个state上来，这个数据是我们要的吗。很明显不是啊，不是我们要的对吧，好，那他不是我们要的。

但是呢，我们要的数据是不是可以通过哎触发一个action，分发一个action，然后去触发什么mut呀。那我们上来应该去干嘛呢？上来咱是不是应该去分发一次action呀？哎，在哪分发呢？哎，我的习惯呢是在哪？哎在这个before，在这我们就可以去分发this.dollar store点哎，Dispach对吧，那现在我们要考虑在这个dispach里边写什么东西，你现在是不是要去。分发一个action呀，那这是不是要写action的名字呀，那这我们答我能随便写吗？那肯定不能随便写啊，那这写什么是不是取决于我们之前这个actions在这起的名字是不是叫啥呀，好，那这呢，哎，这一步呢是去。

呃，干嘛呢，去分发action啊，修改状态好，那修改完状态，我们最终是不是要去拿这个状态值映射到我们当前的组件啊，那映射的套路哎是不是固定的在哪呢？在computed，哎在这个里边去干嘛？哎去映射我们的状态。嗯，应该是映射状态到本组件怎么写套路也是固定的点点点map state对吧，那在这个里边呢，这数组我们要映射的状态是不是叫tmp啊。啊，例子tmp就是把状态映射到哎该组件，OK，那写完这些以后，也就是意味着我们的组件里边是不是能拿到这个数据才对啊，那这个时候呢，我们来到这个页面去看一个东西，看APP data，那在这儿是不是能看到当前页面，哎，实例对象里面的数据啊点击这点开我们来找，那在这儿呢，没有往下，诶这是不是也诶在这呢，它这个还和我们之前原生小程序那个还不一样，原生小程序是不是在这儿呢？直接能看到那个值啊，啊能看到那个值，那现在我们怎么去证明它呢？在这儿数组如果说拿到的话，我可以干嘛呢？V for，我是不是能去便利它。

V for什么in啊，我们映射的状态是不是叫它，那在这呢，我们写完整，呃，Item index对吧，那我CTRLS去保存一下看这边。OK，那这呢有一个报错，这是什么意思呢？说是为了提高效率，提高效率的话应该是什么V放。

微信。看这呢，应该是什么呢，K了OK，给它加一个index。唯一值对吧，好，那现在。没有什么警告了，但是呢，哎这边的数据呢，没有了，哎数据没有那说明什么，说明我们在取数据的时候，哎出现了一点问题，出现了一点问题，首先我们要确认一个事情啊，要确认一个事情，我们这个。Dispatch它，哎分发action了，那怎么去排这个错呢？也比较简单啊，也比较简单，首先我们可以在这我去打印个log，你比如说这是什么actions CTR背一下，看看它有没有走到这一步，OK，走到了以后，Action一旦走了是不会走这一步呀，哎，会走这一步，那接下来我再去直接打印一个东西叫state不就完了吗？走，你list template，也就是说现在在这儿。

是不是有那个数组呀，那在这有mutations这儿搞定了以后，按理来说我的store对象的话，哎在这儿呢，也拿到这个数据了，那问题很有可能出现在哪呢？出现在我们这一块，哎出现在我们这一块，就是说我们取那个在毕业利这一块的话，我看一下，哎，咱们这应该也是没啥问题的。Item index in tablet，那我们在这点点点mapt，这映射的也没有什么错，哎，也没有什么错呀，呃，还有一个东西我们来看一下。呃，微放在这儿呢，没什么问题。好，那我们看一下他在这一块呢，也不去报错，哎，也不去报错，嗯，不去报错的话，在这一块呢，这也是没有数据的对吧？好，那我们来分析下，哎，其实这是这的问题，应该是科PI。

嗯，它映射状态也是最后一步，应该是出了问题，好往下来看，这儿的数据是不是有了，哎数据有了，那数据有多个说明什么，这其实不用数，一共是七个啊，一共是七个，因为刚刚我们看到那个打印，那这这个数组的Les是不是七呀，哎，只不过现在里边的数据是不是还是写死的。那数据写死的话，我们只需要把数据给他写活不就完了吗？那数据是不是在这个组件里边，那现在数据源是不是在这儿。哎，数据源是不是在这儿，那也就是说我们现在只需要想办法把数据，哎从这是不是传递到下边这个，下边这个组件就OK了呀。

对吧，那怎么去传呢？也比较简单，冒号item，哎，我们以这种形式是不是能把这个对象传过去啊，那既然这传了，我们这上来第一步是不是要去干嘛，哎，要去接收一下，我们刚传的是叫item，好，那这个东西传过来，其实我们还得做一个事情啊，顺带就做了，我们把那个下标呢，也给他干嘛，也传过来吧，那顺道呢，在这儿接收一下。OK index item有了，那上边这个简答，呃，这应该是item点点什么，你在这去找就可以随便点开一个，是不是找一个用户头像，是不是叫a vita呀，维塔，那这个时候前面是不是要强制解析一下，好，那这呢，哎这个呢是日期item.date下边这个。

嗯，我们item点什么呀，它应该是个公司的那个名字，我记得我是叫他的title，好呃，这儿呢是那个大图对吧？啊所以呢，这我们写个item点大图的话，应该是这个啊，应该是它走你那这个呢是内容item点我们看我们这是叫的它detail content。好，那下边这两个东西呢，我没有写啊，这两个因为是小图标，小图标，那在这呢，我就把它写死，然后呢，下边这其实还有什么呢，我们来看一下。呃，八十八六十六，这是不是也有啊love Co对吧？嗯，Item点哎，把这个粘过来一份包，那这个呢，我们也可以去写。

那这个呢，我是叫它attention count，千万别忘了这个item，来，我们来看一下数据是不是动态的，呃，OK，那首先其他都出来了，是不是少一个大图，为什么少一个大图呢？大家看是路径的问题啊，路径的问题那是因为我现在你看我这是不是写死了一个路径啊，Static下边。根路径下，Static下边，Images下边。然后detail。哎，那我们看这边的报错，哎，他说是list下边item.detail。Image是不是这个大图啊，那这个大图的话，我们在这用的是什么呢？它哎少一个东西，它解析不了是不是它呀。OK，走你。好，那这个时候呢，我们就看到我们所有的数据是不是就动态展现了呀，哎，这节课呢，主要给大家讲一下啊，在我们V的开发里边如何去使用什么VIVO X，好，那本节课呢，就讲到这里。