[聚合文章] 如果你想开发一个应用(1-17)

数据模型

mvvm是数据驱动的，数据模型占了举足轻重的地位，所以，在做首页最终要的todo列表组件的时候，先暂时在客户端使用数据模型进行开发。而既然已经想到了这些数据需要通过交互从服务端获取，所以这个模型直接放入vuex中，数据模型的代码上一章已经分析过，所以这里直接复制过来：

indexTodos:[    {        month:0,              //月份        default:1,            //正在显示的月份        todos:[{            createTime:new Date(),   //记录时间            item:'',                 //标题            content:'',              //内容            weather:0,               //天气            mood:0,                  //心情            bookmark:0,              //标记            groupid:0,               //所属组        }]    }]

这里使用了两个数组，即月份组，每个月是一个项，而月份内呢，记事也是一个数组，每个记事项就是一个项。

引用vuex

具体到页面中怎么用呢？也就是说，页面如何使用vuex库中的值呢？

这里使用computed关键字，在vue中computed关键字的意思是实时计算，或者说监控值的变化，具体到代码中，首先需要我们需要的vuex组件，这里需要状态：

import { mapState } from 'vuex'

然后使用computed来引用组件中的值：

computed: mapState({        groupId: state=>state.groupId,        items:state=>state.indexTodos}),

这样，Index.vue就可以像是使用data节点那样，通过this引用这两个值了。

组件化

这里需要思考一下，head有三个item，每个item对应的panel都需要在内容部分显示，那么，该如何控制具体到每个panel的显示或者加载呢？首先pass掉的肯定是做三个相同head和foot的页，这样的很明显不符合单页的需求，第二个被pass掉的应该是在这个页创建三个div，然后通过tabitem来控制div的隐藏显示了，那么，第三种方法应该是第二种的升级版，创建三个组件，通过tabitem来选择不同的组件加载。

这里我们先创建一个components,用来放我们所需要的组件。

首先，我们至少需要三个组件，也就是对应tabitem的三个，分别为：

• DiaryPanel.vue 记录项(为防止与日记记录组相混淆，这里统一改为记录，标题为点滴，略微文青些)
• Calendar.vue 日历项
• Mine.vue 我的项

反正组件文件已经建立，那么我们先将他们一股脑的在Index页面中引用。

import DiaryPanelComponents from '../components/DiaryPanel.vue'import CalendarComponents from '../components/Calendar.vue'import MineComponents from '../components/Mine.vue'

因为完成之后，紧接着就是要对它们进行注册：

components:{        DiaryPanelComponents,        CalendarComponents,        MineComponents},

这时，就可以和html标签一样使用了。

<div id="contentPanel">    <transition   name="custom-classes-transition"    enter-active-class="animated bounceInLeft"    leave-active-class="animated fadeOut"    :duration="{ enter: 700, leave: 200 }"    >        <DiaryPanelComponents></DiaryPanelComponents>    </transition></div>

但是，我们想想，这样的这个页面只能使用DiaryPanelComponents这一个组件，其他组件怎么办，如果将三个组件一股脑的全写在这个div节点中，控制显示隐藏，岂不是又回到了老路上？

好在vue提供了动态绑定组件的功能，我们在data数据模型中新增一个表示组件名称的属性currentView表示当前处于显示状态的组件：

data () {    return {        currentView:'DiaryPanelComponents',        ...    }},

然后修改组件部分的模板html：

<div id="contentPanel">    <transition   name="custom-classes-transition"    enter-active-class="animated bounceInLeft"    leave-active-class="animated fadeOut"    :duration="{ enter: 700, leave: 200 }"    >        <component v-bind:is="currentView">        </component>    </transition></div>

这样，tab的item选择操作，就变成了最基本的的字符串赋值操作：

tabChange:function(event){    ...    var componentName = ''    switch (event) {        case 'tab1':        componentName = 'DiaryPanelComponents'        break        case 'tab2':        componentName = 'CalendarComponents'        break        case 'tab3':        componentName = 'MineComponents'        break    }    this.currentView = componentName}

组件嵌套

首页现在基本只起一个调度作用，具体的内容交给了组件来完成，下面打开DiaryPanel.vue，对这个组件进行开发。

分析一下这个组件，这个组同样分为两部分，头部一个作为标题的月份，下边循环显示一个此月所有的记录项。

但无论开发哪个部分，我们都需要先从vuex中将数据取出来：

import { mapState } from 'vuex'export default {    computed: mapState({        indexTodos: state=>state.indexTodos,    })}

剩下的就很简单了，先把显示的部分代码写完，这里用了museui的组件sub-header：

<div  v-for="item in indexTodos" >    <mu-sub-header class="day_title">{{ item.month }}</mu-sub-header>    <DiaryListComponents></DiaryListComponents></div>

然后根据实际情况修改css样式：

.day_title{    font-size: 50px;     line-height: 55px;    font-family: 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;    font-weight: 500;    color: #5e35b1;    text-align: center;    padding: 0px;}

接下来就是循环显示记录列表了，想一下原型中，这个todo放到了一个面板块内，而面板块还是比较复杂的，并且每个月都要使用，所以，我们也把他提炼到一个组件中，嗯，就叫DiaryList,从这里也可以看出，vue的组件是支持嵌套的。接下来在components文件夹内创建DiaryList文件。

同时，由于用户会滑动页面，也就是说，这个组件内所需要的值，即todo数组，是与父组件联系紧密的，所以需要通过参数的方式，将父组件循环得来的值传送到子组件中，vue中传值也非常方便，在标签引用的地方绑定一下就行了：

<DiaryListComponents v-bind:todos="item.todos"></DiaryListComponents>

然后子组件获取更加简单：

DiaryList.vue：

export default {    props:["todos"]}

这样就可以直接使用todos变量。

而面板使用museui的pager控件就可以了，还自带阴影效果,并且是在循环体内，使用todos变量的pager代码如下；

<mu-paper class="diaryitem" :zDepth="2" v-for="(item) in todos" ></mu-paper>

过滤器

接下来就是对这个组件的开发了。观察一下这个块的内容：