Vue: Instance $dispatch won't return the value

Created on 31 Jan 2016  ·  3Comments  ·  Source: vuejs/vue

Hi, I'm a little confused about the vm.$dispatch since I expected it to return values from the listener's callback for further logic which could not be placed in the callback _(imo)_ but it turned out to be the instance it self. I'm learning Vue and probably missed something.

var vm = new Vue({
    // omitted
    events: {
        'object:creating' : function (args) {
            // omitted
            return false;
        },
        'object:created' : function (args) {
            // omitted
        }
    }
});

var child = new Vue({
    parent: vm,
    // omitted
    methods: {
        performWhatever: function (args) {
            //
        },
        createObject: function (args) {
            // Pre-create
            if ( this.$dispatch('object:creating', args) === false ) {
                // Stop the creation
            }
            // The business logic
            this.performWhatever(args);

            // Post-create
            this.$dispatch('object:created', args);
        }
    }
})

As you can see, the pre-create operation is optional.
Thank you.

picture hiendv

Most helpful comment

  1. $dispatch has no return value.
  2. Using the event system ($dispatch, $emit and so on) means your code will be asynchronous, which means what happens next is decided by the message receiver, so you don't write something like
    SomeAsyncCode === false
  3. In the javascript world, we use callbacks to handle asynchronous logic (Promises are better but it's not applicable here), and $dispatch expects you to pass multiple arguments including a callback function.
  4. Therefore, this is what you actually need:
this.$dispatch('object:creating', args, function() {
    // The business logic
    this.performWhatever(args);
})

and on the receiver's side,

events: {
    'object:creating' : function (args, callback) {
        // Do something with args and fire callback (or not)
        callback()
    }
}
picture fnlctrl on 31 Jan 2016
👍4

All 3 comments

  1. $dispatch has no return value.
  2. Using the event system ($dispatch, $emit and so on) means your code will be asynchronous, which means what happens next is decided by the message receiver, so you don't write something like
    SomeAsyncCode === false
  3. In the javascript world, we use callbacks to handle asynchronous logic (Promises are better but it's not applicable here), and $dispatch expects you to pass multiple arguments including a callback function.
  4. Therefore, this is what you actually need:
this.$dispatch('object:creating', args, function() {
    // The business logic
    this.performWhatever(args);
})

and on the receiver's side,

events: {
    'object:creating' : function (args, callback) {
        // Do something with args and fire callback (or not)
        callback()
    }
}
fnlctrl picture fnlctrl on 31 Jan 2016
👍4

Thanks @fnlctrl for the explanation :)

yyx990803 picture yyx990803 on 31 Jan 2016

@fnlctrl Thank you for explaination. It's asynchronous, I forgot, how embarrassing =D

hiendv picture hiendv on 31 Jan 2016
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wenLiangcan picture wenLiangcan  ·  39Comments
smolinari picture smolinari  ·  116Comments
asiFarran picture asiFarran  ·  34Comments
Akryum picture Akryum  ·  34Comments
karevn picture karevn  ·  36Comments