去年年底自己搭了一個vue在移動端的開發框架，感覺體驗不是很好。上個星期又要做移動端的項目了。所以我花了兩天時間對之前的那個開發框架做了以下優化

自定義 vuex-plugins-loading

如果每個頁面在數據加載完成前，展示loading。你首先想到的是每個頁面設置狀態，show和hide狀態。但是這樣冗余代碼太多了，而且自己寫的都煩。我之前的react的項目中用到了dva，其中有dva-loading庫，之前就有研究過，所以我就用他的思想，自己寫一個vuex-loading。

實現思路：vuex中注冊一個管理loading的module,通過綁定異步的action，將每個action的loading存在vuex中，這樣我在每個頁面只需要在vuex的store中拿相對應的action loading就能達到此目的

 ## 核心代碼  store.subscribeAction({   before: action => {    if (shouldEffect(action, includes, excludes)) {     store.commit({ type: namespace + '/SHOW', payload: action.type })    }   },   after: action => {    if (shouldEffect(action, includes, excludes)) {     store.commit({ type: namespace + '/HIDE', payload: action.type })    }   }  }) }}

使用之前大家可以先了解一下subscribeAction

想安裝此插件，請點擊這里，記得給個star喲

注意: 使用上述代碼,vuex必需為3.1.0版本。因為subscribeAction在3.1.0才新增的

路由切換動畫 + keep alive 動態管理緩存組件

之前采用的是全局設置路由切換動畫，但是體驗效果不是很好，特別是返回列表頁，頁面會引起回彈，頁面切換時會有暫時的空白。

未改造前的，也是參考別人的做法

## app.vue <transition :name="transitionName">   <keep-alive :include="data">    <router-view></router-view>  </keep-alive> </transition>  computed: {  // 數據存放在vuex里面  ...mapState({   data: state => {    return state.global.data   }  }) }, methods: {  // 設置Keep_alive路由  setKeep_alive (to) {   if (to.meta.keepAlive) {    this.$store.dispatch({     type: 'global/setData',     payload: to.name    })   }  } }, watch: {  '$route' (to, from) {   // 此時從from頁面跳轉到to頁面   this.setKeep_alive(to)   const routeDeep = ['/', '/list', '/detail', '/reservation', '/addCars']   const toDepth = routeDeep.indexOf(to.path)   const fromDepth = routeDeep.indexOf(from.path)   if (!from.name) {    this.transitionName = 'fold'    return   }   this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'  } },