Vue-loading-decorator

• generate the corresponding function name loading data in Vue instance
• automatically switch loading data according to function invoke status

install

npm install vue-loading-decorator
# or
yarn add vue-loading-decorator

Usage

• with vue-class-component

  auto generate getListLoading default value is false in data, auto switch getListLoading base on getList funtion and use getListLoading in template easily;

  example: WithVueClassComponent

  import { Vue, Component, asyncLoading } from 'vue-loading-decorator'
  
  @Component
  export default class WithVueClassComponent extends Vue {
    count = 0
  
    @asyncLoading()  // work with async function
    async getList () {
      this.count = 1
      // await apiRequest()
    }
  
    @asyncLoading()   // not work with normal function
    handleGetList () {}
  }

  approximately equivalent to:

  import { Vue, Component, asyncLoading } from 'vue-loading-decorator'
  
  @Component
  export default class WithVueClassComponent extends Vue {
    count = 0
    getListLoading = false
  
    async getList () {
      try {
        getListLoading = true
        this.count = 1
        // await apiRequest()
        getListLoading = false
      } catch (e) {
        getListLoading = false
        throw e
      }
    }
  
    handleGetList () {}
  }

• with vue option component

  example: WithVueOptionComponent

  import { loadingMixinWrapper } from 'vue-loading-decorator'
  
  export default loadingMixinWrapper({
    data () {
      return {
        count: 0
      }
    },
    methods: {
      async getList () {
        this.count = 1
        // await apiRequest()
      }
    }
  })

  approximately equivalent to:

  export default {
    data () {
      return {
        count: 0,
        getListLoading: false
      }
    },
    methods: {
      async getList () {
        try {
          this.getListLoading = true
          this.count = 1
          // await apiRequest()
          this.getListLoading = false
        } catch (e) {
          this.getListLoading = false
          throw e
        }
      }
    }
  }