基于mint-ui的移动应用开发案例三（首页）

本节主要包含以下内容：

首页大致布局
vuex进行底部tabbar的显示与隐藏控制和tab选中控制
mint-cell-swipe组件的使用

1.vuex的引入与使用

首先在state文件夹中新建一个mutation_types.js用于存放要提交的动作，和一个index.js主要配置js。这里主要是定义了两个动作，一个叫TOOGLE_FOOTER用于控制底部bar的显示与否，一个叫SELECTED_TAB用于控制底部tab选中的标签。

在index.js中定义的状态state和mutations也是这两个相关的：

mutation_types.js

export const TOGGLE_FOOTER = \'TOGGLE_FOOTER\';
export const SELECT_TAB = \'SELECT_TAB\';

index.js

import Vue from \'vue\'
import Vuex from \'vuex\'
import * as types from \'./mutation-types\'//导入


Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    footerVisible: true,//底部bar显示的状态
    selectedTab: \'main\'//选中的tab标签
  },
  mutations: {
    [types.TOGGLE_FOOTER] (state) {
      state.footerVisible = !state.footerVisible
    },
    [types.SELECT_TAB](state, val){
      state.selectedTab = val
    }
  }
});
export default store

接着在main.js中引入状态管理：

import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
import MintUI from \'mint-ui\'

import store from \'./store/index.js\'//引入

import echarts from \'echarts\'

Vue.prototype.$echarts = echarts

Vue.use(MintUI);

/*Vue.config.productionTip = false;*/


new Vue({
  el: \'#app\',
  router,
  store,//使用
  template: \'<App/>\',
  components: {App}
});

接下来我们的页面要想使用这些状态或者想要改变这些状态，只需要 this.$store.state.footerVisible 或者 this.$store.commit(\'TOGGLE_FOOTER\'); 就可以了。

2.首页布局与mint-cell-swipe的使用

首页的实现很简单，就是一个header和一个可以右滑菜单的cell，这些都是mint里面的组件，可以直接使用，先上代码：

<template>
  <div id="index">
    <mt-header fixed title="首页"></mt-header>
    <div class="content">
      <mt-cell-swipe
        :right="right"
        title="未读通知">
        <span><mt-badge type="error">10</mt-badge></span>
      </mt-cell-swipe>

    </div>
  </div>
</template>
<style scoped>
  .content {
    margin-top: 40px;
  }

</style>
<script>
  import {Toast} from \'mint-ui\';

  export default {
    data(){
      return {
        right: [
          {
            content: \'删除\',
            style: {background: \'red\', color: \'#fff\', width: \'50px\', textAlign: \'center\'},
            handler: () => this.$messagebox({
              title: \'提示\',
              message: \'确定执行此操作?\',
              showCancelButton: true
            }).then((action) => {
              if (action === \'confirm\') {
                Toast({message: \'删除成功\'})
              } else {

              }
            })
          }
        ]
      }
    },
    created(){
      let _footer = this.$store.state.footerVisible;
      if (!_footer) {
        this.$store.commit(\'TOGGLE_FOOTER\');
      }
      this.$store.commit(\'SELECT_TAB\', \'main\')
    }
  }
</script>

可以看到，在钩子函数created中，获取了当前footerbar的显示状态，如果是false的话，就变成true显示；接着将选中的tab标签设置为main。

另外，mt-cell-swipe组件的属性right接收一个对象，其中content表示右滑后显示的内容，style表示content的样式，handler()表示点击content对应内容后的处理函数，这里是弹出一个信息对话框，然后根据选择“确认”“取消”来执行不同的动作。本例只是简单的模拟一下各控件的使用，不涉及数据操作。

2018-07-12更新：由于后续增加和改进的东西比较多，强烈建议参考github上最新的项目：

https://github.com/JerryYuanJ/a-vue-app-template

如果你项目搭建中遇到问题，请提交issue或者及时与我联系，谢谢。