プラグインのVue.jsバインディングコンテキスト？

Question

Vue.jsに単純なプラグインを作成して、vue-resourceプラグインをラップしてリクエストの状態を追跡しようとしています。

function State() {} 

State.prototype.post = function (ctx, name, url, data, successCB, errorCB) { 
    var options = {}; 

    if (errorCB) { 
     options.error = function (resp) { 
      ctx[name] = 'error'; 

      return errorCB(resp); 
     }; 
    } 

    ctx[name] = 'sending'; 

    ctx.$http.post(url, data, function (res, code, req) { 
     ctx[name] = 'sent'; 

     return successCB(res, code, req); 
    }, options); 
}; 

function install(Vue) { 
    Object.defineProperties(Vue.prototype, { 
     $state: { 
      get: function() { 
       return new State; 
       // return Vue.state.bind({$vm: this}); 
      } 
     } 
    }); 
} 

module.exports = install; 

あなたは、私はそれがdata値ですへのアクセスを取得するために呼び出すヴューからctxコンテキストを渡す表示されます。私はvue-resourceプラグインでは、プラグインを介してこれを自動的にバインドする方法があることを見てきましたが、バットは構文を正しく取得できません。

基本的には、毎回ctxのコンテキストを渡す必要はなく、ちょうど適切なコンテキストがあるはずです。

EDIT

私は適切なコンテキストを渡すための解決策を探しています明確にする。上記のちょうど一種の一例であり、私は状態を追跡するための解決策を探していませんよ。

たとえば、vue-resourceプラグインでは、httpリクエストを行う場合です。

this.$http.get('/some/url', {}, function() { 
    this.func(); 

    console.log(this.var); 
}); 

コンテキストがコールバックですでに存在しています。私はビューのスコープに入るために何らかの種類のvar _this = thisをする必要はありません。私はプラグインのために同じを達成したいので、適切なthisがそこにあるようにしてください。私はvue-resourceプラグインからそれを理解しようとしていますが、すべてのコードに従うのは苦労しています。

Answer 1

それらを追跡することができそうすれば、私が思ったよりも簡単でした。

ので、同じよう呼び出しを行うことができるように、それはvue-routerで$http方法の周りだけのシンプルなショートカットラッパーです：

this.$state.get('/buildings', data, function (resp) { 
    this.buildings = resp.data; 
}, { 
    track: 'getBuildingState' 
}); 

それとも

this.$state('/buildings', { 
    data: data, 
    track: 'getBuildingState', 
    success: function (resp) { 
     this.buildings = resp.data; 
    } 
}); 

がGihub here

にスニペットをチェックアウトすることができます

Answer 2

は答えに私のコメントを拡大 -

つまり、あなたのVueのコンポーネントにname性質を持っていて、HTTPリクエストが進むにつれて、このプラグインは、その値を更新したいですか？私はそれがあなたに悪い責任を与えると思います。あなたのVueインスタンスはnameプロパティを持つ必要があり、プラグインはスタンドアロンではありません。

プラグインがすべての状態追跡を独自に処理するようにする方がよいでしょう。要求が進行すると更新されるstatusという州のプロパティを更新することができます。その後、this.$state.statusを使って現在の状態を知ることができます。そして、それが目的だのためにプラグインが担当し、コンポーネントはHTMLでその後独立し

State.prototype.status = "not sent"; 

State.prototype.post = function (url, data, successCB, errorCB) { 
    var options = {}; 

    if (errorCB) { 
     options.error = function (resp) { 
      this.status = 'error'; 

      return errorCB(resp); 
     }; 
    } 

    this.status = 'sending'; 

    this.Vue.http.post(url, data, function (res, code, req) { 
     this.status = 'sent'; 

     return successCB(res, code, req); 
    }, options); 
}; 

function install(Vue) { 
    Object.defineProperties(Vue.prototype, { 
     $state: { 
      get: function() { 
       var state = new State; 
       state.Vue = Vue; 
       return state; 
      } 
     } 
    }); 
} 

まま：

<div v-if="$state.status == 'sending'">Sending...</div> 
<div v-if="$state.status == 'sent'">Sent!</div> 
<div v-if="$state.status == 'error'">Error!</div> 

あなたは物事にあなたの方法をしたいならば、私はあなただけに必要と思いますあなたのVueのコンポーネント内からthisたびpost()にバインド：

this.$state.post(args){ 

}.bind(this) 

のでpost機能内あなたのVueになります。あなたがそれらをそこに定義されているため

機能successCbとerrorCbはすでに、Vueのコンポーネントのスコープ内で実行されている - 私は、最初の方法は、最高の

編集だと思います。あなたの状況のvue-resourceコールバックは、ここで定義したので、Stateのスコープを持ちます。これは、行ったようにコンテキストを渡さない限り変更されません。しかしここでのポイントは、プラグインがコンポーネントのコンテキストを知る必要はないということです。vue-resourceはコンポーネントのコンテキストを知らないのと同じです。データを取得し、要求を送信し、コールバックを実行します。呼び出し元のコンポーネントについて何も知りません。あなたはすることができるはずと-

だから、あなたがコールバックとしてthis.$state.postに送る機能で、あなたはthis.varを使用して、Vueのデータを編集することができます。状態からVue.http.postに送信するコールバックでは、Stateオブジェクトのプロパティを編集することができます。これは再び予想される動作です。 nameまたはstatus変数をStateの一部にして、Vueコンポーネント内からthis.$state.nameと参照する必要があります。

編集2：

あなたも変数$state.responseを持っており、myCustomVarに渡し、その$state.response.myCustomVarを追跡することができます。あなたが要求ごとに異なるカスタム変数を渡すと、私はこれを整理終わった独立