08. 尚硅谷_mpVue_Vuex准备工作.avi原创

好，我们接着上课，那么这节课呢，我们要去把list这个页面的数据呢，哎，写成动态的，呃，写成动态的，那么动态的数据呢，我这儿有，哎，我这有，那这个数据在哪呢？是呃，大家想我这是我之前写好那个项目，哎，我之前写好那个项目，我记得在。呃，不是在这儿，S2C下边这是不是有个data呀，哎，有个data，那这个list子data呢，正好是我们要的数据，所以呢，我在这硬盘去打开它到data里面呢，找到这一个，哎找到这一个数据，好，找到这个数据的话，我们来到我们的项目呢，我也可以放在这儿，你比如说我在这去创建一个datas，然后呢，把这个数据，也就是我之前模拟的数据呢放进来。那数据有了以后，这个数据首先我们是在list这个页面用啊，这个数据要知道我当初模拟的是一个什么，哎，是一个数组对吧，数组里边有的是每都是对象，那一个对象呢，对应的是我们页面上一个板块的内容，也就是说我们只要想办法在list这个组件里边拿到那个数组。

我是不是就可以便利这个模板这个组件，然后生成多个呀。然后呢，还要注意的是，是在这个list template里边，它是不是要里边对应的某一项那个数据啊，要某一项数据。OK，那这倒不是什么大事啊，不是什么难事，那在例子这儿，我们现在如何去拿到。这个list data的数据呢，哎，这是个问题，那其实也不难啊，其实我在这个上边，在这儿我能我可以干嘛呢？我可以直接去引入它，你比如说第一个变量，我通过块去引入，那这呢太简单了啊，我们之前在原生的小程序里边，我是把那个数据放在哪了，放在全局APP。

点GS里边，然后呢，我们通过get APP是不是能拿到呀，哎，那这个时候呢，可能忘了有的同学，那我带大家去回忆一下在框架这，哎框架这呢，我们注册程序的话，是不是这个APP啊，往下它下边有一个说明叫get APP是不是能拿到那个APP的实例啊，哎，在那里边呢，就有对应的数据，但是呢，现在在map view里边其实不好使，为啥呢？这个是我们相当于是我们全局那个GS文件了啊在这那我在这儿我去写一个data。好，然后呢，我去return一个对象，我们随便写一个message，你比如叉叉叉写完了以后来到list这那按照我们之前的方式，你比如说我let一个APP data等于什么，等于get APP，好，那这个时候呢，我去给他打印一下这个APP data，我们来看一下它长什么样啊，长什么样来这个呢，是我们打印出来的APP data，来点开以后，你会发现找不到我刚刚整的那个message那个数据，哎，没有，所以呢，在这儿呢，我们不使用这种方式，也说不把它放到这个app.view里面。

现在呢，我要用一种比较复杂的方式，哎，主要呢，是想带大家去再去巩固或者学习一下，哎，V里边的一个比较重要的东西叫view。X，哎，它呢是专门管理我们V的一个状态的库，那要使用VUX的话，第一步我们应该去n PM install，是不是去下载它呀。好，那在它下载的时候呢，哎，我们可以去做一件事情，首先要使用这个vivox的话，我们可以去创建一个文件，哎，叫它star，那在这里边呢，哎，我们还是养成之前的习惯，哎单独的去整VIVO X相关的东西，哎首先我们来回顾一下，它最核心的是不是这个对象，所以呢，给它创建个star GS，那star呢，是用来管理什么的，是不是state呀？好，那用来管理的，那它用来管理state，大家再想一下，在。

在我们这个VX里边还有几个比较重要的概念，哎，是什么呢？比较重要的概念是什么？Action。还有呢？除了action还有mutation对吧？哎，还有mutation没问题，好那。Tation action也有了，哎，其实我们PACH1分发是不是就可以啊，所以呢，在这呢，我可以去创建一个你比如action.action点。

GS对吧？啊没问题，OK，那回车还有一个叫mutations.js，那这是四个，其实它还有一个叫gets，是不是能帮我们，哎动态的去计算呀，只不过在这呢，我们用不到，另外呢，我还会去创建一个文件，那这个呢，我叫它哎mutation，然后呢，type.js，那这个呢，专门去写mutation里边那个它函数的一个类型，也就是type，哎那这样的话呢，我们是不容易出错的啊，不容易出错的好，我们看一下这边呢，已经下载好了，诶下载好了以后我们怎么去用它呢？首先呢，我们来到这个star，这哎store是最核心的个对象，在这儿首先你离不开要view，然后呢，就是我们刚下载的什么X from吗？

Vovo X，好，那其他的也一并把它引入进来，呃，首先有个store对象对吧？那我们刚刚是不是创建了一个star，没问题，那还有什么呢？呃，Star里边是不是需要哎，状态啊，From当前路基下的，呃，State，好，我复制几份吧，那state完了呢，叫actions actions，那么还有我们的。Mutations。那这儿呢也得改，哎，这后边别忘了也得改mutations，哎，其实写的完整一点的话，我们还应该有一个是get，哎，其实这个get呢，应该是gets才对啊，刚刚呢，咱们这个文件名少了一个复数，哎，不过这样呢也没有关系，那要使用VX第一步要干嘛？首先要声明使用VX，哎，这个套路是固定的v.use然后呢，是不是把VX放进去啊。

好，接下来我们是不是要往外去暴露，哎，我们V最核心的store对象，所以呢，我会在这另用一个V x.store那么在这里边呢，需要传的内容正好是store对象要管理的state，所以这个state对应的应该是我刚刚这定义的，哎，这个state包括action mutations actions，还有gets，那现在呢，我在外边是不是故意定义了一个同名的和它为什么要这样定义呢？那是因为在ES6里边同名的属性可以省略不写，哎，所以呢，在这写个actions，注意这个action，这个S必须要有包括下边的什么。S mutations。

好，那我们这边已经向外暴露了一个store对象，那么这个store要在我们这个组件页面里面要使用，我们还得去做一件事情，是不是要把那个store对象放到哪，放到我们的原型上，那首先在这儿呢，是没有办法放的，所以呢，我会选择在我们的入口文件里边，哎，在这儿去放置它，那在这儿的话我应该引入一个。Star，哎，对象from什么呢？哎，From我们的这个star文件夹下边，或者说当前路径线的store下边的store GS对吧？哎，引入它，那么引入它以后，我们要把它放到原型上啊，要把它放到原型上，那注意一定要在这个挂载之前去放置它啊，挂载之前呢去放置它，所以所以呢，我们会这样写，我在这去写，你比如点pro.Dollar star等于什么？等于我们刚刚引入这个star对象，哎。

这一步呢，是将star对象哎放置在。为右的原型上，哎，为的是什么？哎，为的是每个实例都可以使用，OK，那这是我们最基本的一个流程，我们已经把它写完了，好，那这节课呢，我们先讲到这里。