本節主要包含以下內容：

1. 首頁大致佈局
2. vuex進行底部tabbar的顯示與隱藏控制和tab選中控制
3. 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';
 

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
 

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}
});
 

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>

另外，mt-cell-swipe元件的屬性right接收一個物件，其中content表示右滑後顯示的內容，style表示content的樣式，handler()表示點選content對應內容後的處理函式，這裡是彈出一個資訊對話方塊，然後根據選擇“確認”“取消”來執行不同的動作。本例只是簡單的模擬一下各控制元件的使用，不涉及資料操作。

2018-07-12更新：由於後續增加和改進的東西比較多，強烈建議參考github上最新的專案：