1

So this is my Vuex action, which calls my plugin $errorToast with this._vm:

activateCoupon: (context, id) => {
    return new Promise((resolve, reject) => {
       api.activateCoupon({id: id}).then(
           (response) => {
               if(response.success){
                   context.commit('RESET_CART');
                   context.commit('SET_COUPON', response.body.data.coupon);
                   resolve(response); 
               }else{
                    this._vm.$errorToast.show(resBody.code);
                    reject(response);
               }
           },
           (error) => {
                this._vm.$errorToast.show(error.body.code);
                reject(error);
           }
       );
    });  
}

but somehow it transpiles to this: (this => undefined)

activateCoupon: function activateCoupon(context, id) {
    return new Promise(function (resolve, reject) {
        _api2.default.activateCoupon({ id: id }).then(function (response) {
            if (response.success) {
                context.commit('RESET_CART');
                context.commit('SET_COUPON', response.body.data.coupon);
                resolve(response);
            } else {
                undefined._vm.$errorToast.show(resBody.code);
                reject(response);
            }
        }, function (error) {
            undefined._vm.$errorToast.show(error.body.code);
            reject(error);
        });
    });
},

The weird thing is that i am using the same approach for my other VuexStore. And in the other Store 'this' becomes '_this8'.
I am using Laravel-Mix for compiling.

pwnh
  • 13
  • 1
  • 6
  • It transpiles to `undefined` because it evaluates to `undefined`. You're using an arrow function, so `this` references the parent's scope instead of the scope of the function. – thanksd Mar 08 '18 at 16:51

0 Answers0