Vue js 2 - Callback function for an action dispatched in a component

Question

Is there any way to know if the dispatched action from a component has completed or not without setting a state? Right now I have an action - createAddress In my component, I have a modal where the user enters address. When the user enters the details and clicks on 'Save' button, I dispatch the action like this -

saveAddress () {
  this.$store.dispatch('createAddress', this.address)
}

The action makes an axios call and returns either status 200 OK or error. If status 200 I want to close the modal. If error, I don't want to close it. What is the best way to achieve this? Do I really have to create a state, update that state value, watch that value in the component and then close the modal?

Below is what I want from code point of view

saveAddress () {
  this.$store.dispatch('createAddress', this.address)
  // Close modal if success
}

I found the answer here https://stackoverflow.com/questions/40165766/returning-promises-from-vuex-actions?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Vishwas, Mar 27 '18 at 08:33

score 0 · Answer 1 · answered Mar 27 '18 at 06:19

0

saveAddress () {
  this.$store.dispatch('createAddress', this.address, this)
}

and in createAddress, you can close modal

answered Mar 27 '18 at 06:19

jiangyx3915

119
3

don't do this! The action should return a Promise – tato Mar 27 '18 at 22:41

Vue js 2 - Callback function for an action dispatched in a component

1 Answers1