Vue-apicase example

example.vue

<template>
  <div>
    <div v-if="apis.hello.pending">Loading</div>
    <div v-else>
      <button @click="$api.go('hello')">Hello</button>
    </div>
  </div>
</template>

<script>
// Vue.use(VueApicase, new Container(...))
// P.S. Container with hello service

export default {
  data: () => ({
    text: 'Click to start'
  }),
  // Options object for api hooks
  api: {
    hello: {
      hooks: {
        before (ctx, next) {
          // Component instance
          console.log(ctx.vm)
          // Store
          console.log(ctx.store)
          // Router instance
          console.log(ctx.router)
          // Route object
          console.log(ctx.route)
          ctx.vm.text = 'Before hook called'
          next()
        },
        success (ctx) {
          ctx.vm.text = 'Success hook called'
        },
        error (ctx) {
          ctx.vm.text = 'Error hook called'
        },
        finished (ctx) {
          setTimeout(() => {
            ctx.vm.text = 'Finished with 1s delay'
          }, 1000)
        },
        aborted (ctx, reason) {
          ctx.vm.text = 'Aborted hook called'
        }
      }
    }
  }
}
</script>