插件中的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;

您將看到我從調用Vue傳遞ctx上下文以訪問它的data值。 我已經看過vue-resource插件，有一種方法可以通過插件bat自動綁定它，但是不能正確地獲得語法。

基本上我想避免每次都要傳遞ctx上下文，它應該只有適當的上下文。

編輯

澄清我正在尋找一個通過適當上下文的解決方案。上面只是一個例子，我不是在尋找跟蹤狀態的解決方案。

例如，如果我們發出任何http請求，請在vue-resource插件中。

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

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

回調中已存在上下文。 我不需要做某種var _this = this來進入視圖范圍。 我想達到同樣為我的插件，使正確的this僅僅是在那里。 我試圖從vue-resource插件中找出它，但是很難跟蹤所有代碼。

Answer 1

將我的評論擴展到答案 -

因此，您的Vue組件上有一個name屬性，並且您希望此插件在HTTP請求進行時更新該值？ 我認為這會給你一個糟糕的責任鏈。 您的Vue實例需要具有name屬性，並且您的插件不會是獨立的。

最好讓插件自己處理所有狀態跟蹤。 您可以創建State status的屬性，該屬性在請求進行時更新。 然后你可以使用this.$state.status來了解當前狀態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>

如果你想要做的事情你的方式，我覺得你只需要綁定this到post()每次再從Vue的組件中：

this.$state.post(args){

}.bind(this)

所以在post函數中， this將是你的Vue。 我認為第一種方式是最好的

編輯 -

函數successCb和errorCb已經在Vue組件的范圍內運行，因為您在那里定義了它們。 您的情境中的vue-resource回調具有State的范圍，因為您在此處定義了它們，除非您像完成那樣傳遞上下文，否則不會更改。 但這里的要點是你的插件不需要知道組件的上下文，就像vue-resource永遠不知道組件的上下文一樣。 它只獲取數據，發送請求並運行回調。 從不了解調用組件。

所以在你發送給this.$state.post的函數this.$state.post作為回調，你可以使用this.var編輯你的Vue數據 - 你應該可以 。 在您從State發送到Vue.http.post的回調中，您可以編輯State對象的屬性 - 這也是預期的行為。 您需要將name或status變量作為State的一部分，然后將其作為this.$state.name參考this.$state.name從Vue組件中檢查狀態。

編輯2：

你甚至可以有一個變量$state.response並傳入myCustomVar ，然后跟蹤$state.response.myCustomVar 。 這樣，您可以在每個請求上傳遞不同的自定義變量，並獨立跟蹤它們

Answer 2

我最終整理了這個，比我想象的要容易。

它只是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上的片段