详解vue 在移动端体验上的优化解决方案

去年年底自己搭了一个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'  } },