5

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;

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

ctx基本的に、毎回コンテキストを渡す必要がないようにしたいと思います。適切なコンテキストが既にあるはずです。

編集

明確にするために、適切なコンテキストを渡すソリューションを探しています。上記は単なる例であり、状態を追跡するソリューションを探しているわけではありません。

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

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

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

コンテキストはコールバックに既に存在します。var _this = thisビューのスコープに入るために何らかの操作を行う必要はありません。this適切なプラグインがちょうどそこにあるように、プラグインでも同じことを達成したいと考えています。プラグインから理解しようとしていvue-resourceますが、すべてのコードをたどるのに苦労しています。

4

2 に答える 2

3

私のコメントを回答に拡張する -

Vue コンポーネントにプロパティがあり、nameこのプラグインが HTTP リクエストの進行に合わせてその値を更新するようにしたいですか? それはあなたに悪い責任の連鎖を与えると思います。Vue インスタンスにはnameプロパティが必要であり、プラグインはスタンドアロンではありません。

プラグインがすべての状態追跡を独自に処理するようにする方がよいでしょう。statusリクエストが進行するにつれて更新されるState のプロパティを呼び出すことができます。次に、を使用して現在の状態を知ることができますthis.$state.status。次に、プラグインがその目的を担い、コンポーネントは独立したままになります

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;
            }
        }
    });
}

次にhtmlで：

<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関数内にthisVue があります。最初の方法が良いと思います

編集 -

関数successCbとerrorCbは、Vue コンポーネントで定義したため、既に Vue コンポーネントのスコープで実行されています。あなたの状況のvue-resourceコールバックには、ここで定義したためのスコープがありStateます。これは、行ったようにコンテキストを渡さない限り変更されません。ただし、ここでのポイントは、プラグインがコンポーネントのコンテキストを知る必要がないのと同じように、コンポーネントのコンテキストを知る必要がないというvue-resourceことです。データを取得し、リクエストを送信し、コールバックを実行するだけです。呼び出し元のコンポーネントについて何も知りません。

したがって、コールバックとして送信する関数では、-をthis.$state.post使用して Vue データを編集できます。State から送信するコールバックでは、オブジェクトのプロパティを編集できます - これも期待される動作です。または変数を一部にしてから、Vue コンポーネント内から参照してステータスを確認する必要があります。this.varVue.http.postStatenamestatusStatethis.$state.name

編集2：

変数$state.responseを持って を渡し、myCustomVarを追跡することもできます$state.response.myCustomVar。そうすれば、リクエストごとに異なるカスタム変数を渡して、それらを個別に追跡できます

于 2016-03-21T16:59:47.733 に答える