defer destroyed in vue lifecycle hook

Question

In my component I have a mounted hook that fetches some data as an async request:

mounted() {
  this.fetchData()
}

and on beforeDestroy I delete the data from the store:

beforeDestroy(){
  this.destroyDataInStore()
}

These work fine so long as the request in mounted resolves prior to the component begins its tear down.

Is there any way I can defer the beforeDestroy until after the promise has resolved in the mount?

So you need to actually defer the destroy itself, not the invocation of hook, right? — raina77ow

Hammerbot Hammerbot · Accepted Answer · 2018-06-08T14:55:52

You could store the promise:

export default {
    data () {
        return {
            thePromise: null
        }
    },
    mounted () {
        this.thePromise = this.fetchData()
    },
    beforeDestroy () {
        this.thePromise.then(() => {
            this.destroyDataInStore()
        })
    }
}

But in order to be sure that everything works fine I would use the created hook instead of the mounted one:

export default {
    data () {
        return {
            thePromise: null
        }
    },
    created () {
        this.thePromise = this.fetchData()
    },
    beforeDestroy () {
        this.thePromise.then(() => {
            this.destroyDataInStore()
        })
    }
}

defer destroyed in vue lifecycle hook

1 Answers