vue 给同步方法加loading

可以使用Vue的mixins来为多个组件添加相同的方法和属性，其中就可以使用loading的方式来给同步方法加loading效果。

首先，在mixins中定义一个loading属性和showLoading、hideLoading方法，如下：

const loadingMixin = {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    showLoading() {
      this.loading = true
    },
    hideLoading() {
      this.loading = false
    }
  }
}

然后，在需要添加loading效果的组件中引入该mixins，并在需要添加loading效果的同步方法前后分别调用showLoading和hideLoading方法，如下：

import loadingMixin from './loadingMixin'

export default {
  mixins: [loadingMixin],
  methods: {
    async fetchData() {
      try {
        this.showLoading()
        const res = await fetch('xxxxx')
        const data = await res.json()
        // do something with data
      } catch (e) {
        console.log(e)
      } finally {
        this.hideLoading()
      }
    }
  }
}

这样就可以在同步方法执行时，显示loading效果，执行完成后隐藏loading效果了。