Украшать функции, вызываемые в Vue, связываясь с привязками this? - PullRequest
Новая
       14

Украшать функции, вызываемые в Vue, связываясь с привязками this?

1 голос
/ 16 марта 2019

Приложение My Vue использует простой объект JS для централизации вызовов базы данных.Я хочу консоль журнала вызовов.С этой целью я украшаю методы объекта, как показано ниже: 

const Caller = {
    callingDB (arg1, arg2) { return ... } //Promise-wrapped db call here
}
const decorator = f => (...args) => {
    return f(...args).then(res => console.log(`Invoked method ${f.name} with ${args} for result: ${res}`))
}

Caller.callingDB = decorator(Caller.callingDB)

И в нескольких компонентах Vue у меня есть методы компонента, вызывающие вышеупомянутый метод простого объекта как: ... 

methods: {
 cMethod() { this.Caller.callingDB(arg1, arg2) }
}

Однако есть предостережение: однажды оформленный метод Caller.callingDB вызывает ошибку из-за того, что 'this' не определено - поток данных в моем приложении время от времени полагается на цепочечные вызовы БД через методы, подобные показанному выше, всеиз которых вызываются аналогичным образом.Все отлично работает без оформления.

Я не понимаю, почему эти ошибки происходят.Любой намек на то, как мне переписать мой декоратор, чтобы сохранить все последующие вызовы, связанные с этим?Или я пропустил виновника этих ошибок?

Ответы [ 2 ]

1 голос
/ 17 марта 2019

, чтобы расширить ответ @ chris.va.rao:

без необходимости жесткого кодирования объекта "Caller": 

const Caller = {
        foo() {
        return new Promise((resolve) => {
        setTimeout(() => {
            this.counter = this.counter || 1;
          resolve(this.counter);
        }, 1000);
      });
    },
    callingDB(arg1, arg2) {
      return this.foo();
    } //Promise-wrapped db call here
}
function decorator (f) {

    return (...args) => f.apply(this,[...args])
    .then(res => console.log(`Invoked method ${f.name} with ${args} for result: ${res}`))
}


Caller.callingDB = decorator.bind(Caller)(Caller.callingDB);

Caller.callingDB(1, 2, 3);

скрипка

1 голос
/ 16 марта 2019 
const decorator = f => (...args) => {
    return f.apply(Caller, args).then(res => console.log(`Invoked method ${f.name} with ${args} for result: ${res}`))
}

Функции в js имеют метод apply, который принимает значение this в качестве первого аргумента и массив аргументов в качестве второго аргумента.

Вот скрипка измененного кода в действииhttps://jsfiddle.net/435h2gwp/

...