vue.js - Unexpected uncaught exception with Vuex action and Composition API

Question

In the context of Vuex with the composition API for Vue2, I am trying to understand the difference between:

// component/Register.vue
setup() {
  // ...
  function onSubmit() {
      store.dispatch('auth/register', form).then(() => {
          console.log('success')
      })
      .catch(error => {
        console.log('error')
      })
    }
  // ...
  return { onSubmit }
}

and the classic component method:

// component/Register.vue
methods: {
  // ...
  onSubmit() {
    store.dispatch('auth/register', this.form).then(() => {
      console.log('success')
    })
    .catch(error => {
      console.log('error')
    })
  }
// ...
}

and the vuex register action:

// store/module/auth/auth.action.js
async register(ctx, user) {
  console.log('Start registering user')

  try {
    const account = await myApiService.createUser(user.email, user.password)
  } catch (error) {
    throw error
  }
}

Now, let's assume that my API service is throwing an exception. I am having two different outputs between the composition API onSubmit() and the classic onSubmit() method:

Using onSubmit() method:

Using composition API onSubmit() function in setup():

As you can see, using the Composition API, I have an extra Uncaught exception. Any idea why this exception is not caught by my component catch() method?

Answer 1

等待大神解答