Vue页面跳转优化，loading中间状态和骨架屏

原因

先看一段简单、常规的vue代码。

<template>
  <div v-if="list && list.length>0">
    <div v-for="row in list">
      <span>{{row.xxx}}</span>
      //显示剩下数据
    </div>
  </div>
  <div v-else>
    <div>暂无数据</div>
  </div>
</template>
<script>
export default {
  created() {
    this.ajaxform('/chronic/xxx').then(res => {
      this.list = res.body
    })
  }
}
</script>

这段代码在created生命周期函数内会调用后端接口获取数据，我们假设获取数据的时间需要1秒。那么打开页面后将显示“暂无数据”，1秒后才会显示列表数据，给客户的体验有些不好。这篇文章就来解决这个打开页面先显示暂无数据的问题。

思路

我们希望能加入一个过渡状态，在ajax请求加载数据时显示“数据加载中”，数据加载完成后再根据有无数据来显示列表或是“暂无数据”。当跳转页面时，流程如下图：

但不能所有的ajax请求都显示数据加载中，只能是打开页面后立即执行的ajax请求显示加载中，也就是created、mounted中执行的ajax请求显示加载中。

方案

首先我们需要一个全局变量来储存当前正在执行的ajax请求的数量以及是否是页面刚打开的状态。我将这两个变量存在了store中

const state = {
  pageInit: false,
    // 记录有几个ajax请求正在执行中
  ajaxCount: 0,
}
const mutations = {
  updatePageInit: function (state, pageInit) {
    state.pageInit = pageInit
  },
  updateAjaxCount: function (state, count) {
    state.ajaxCount = state.ajaxCount + count
  }
}
export default {
  namespaced: true,
  state,
  mutations
}

然后因为项目中发起ajax请求的组建使用的是axios，所以可以在axios的request、response拦截器中，对这个数进行加减。请求开始，则对ajaxCount加1，请求成功或是失败对ajaxCount减1

axios.interceptors.request.use(
  config => {
    store.commit('user/updateAjaxCount', 1)
    return config
  },
  error => {
    store.commit('user/updateAjaxCount', -1)
    return Promise.reject(error)
  }
)
axios.interceptors.response.use(
  response => {
    store.commit('user/updateAjaxCount', -1)
    return response
  },
  error => {
    store.commit('user/updateAjaxCount', -1)
    return Promise.reject(error)
  }
)

在router的afterEach函数中对pageInit的值进行更新，也就是设置为刚打开页面的状态

router.afterEach(function (to, from) {
  store.commit('user/updatePageInit', true)
})

再然后在App.vue中要做两件事情

1、在template中，通过私有变量loading的值显示、隐藏<router-view>和加载状态（菊花动图）。

2、对ajaxCount进行watch，当ajaxCount大于0，且是刚进入页面的状态时，设置私有变量loading为true，显示加载中状态。

     当ajaxCount等于0时，也就是ajax请求全部结束时，设置私有变量loading为false，关闭加载中状态，设置pageInit为false，显示数据。

<template>
  <div style='height:100%;'>
    <router-view v-show="!loading"></router-view>
    <div v-show="loading"><img src="xxx/juhua.gif"></div><!-- 转菊花的动图 -->
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      loading: false
    }
  },
  computed: mapState({
    pageInit: state => state.user.pageInit,
    ajaxCount: state => state.user.ajaxCount
  }),
  watch: {
    ajaxCount (count) {
      // count>0表示有ajax请求正在执行中， pageInit表示刚进入新页面， loading表示菊花转的状态
      if (count > 0 && this.pageInit && this.loading === false) {
        this.loading = true
      }
      if (count === 0) {
        this.loading = false
        this.$store.commit('user/updatePageInit', false)
      }
    }
  }
}
</script>

以下是效果图，第一张加载中状态是转菊花的图，第二张加载中状态是骨架屏的图

       

结语

我们加载中状态显示的很简单，只是转菊花，这里也可以做的效果更好一些，例如骨架屏等。