javascript - 插件中的 Vue.js 绑定(bind)上下文？

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 自动绑定(bind)它，但语法不正确。

基本上我想避免每次都必须传递 ctx 上下文，它应该已经有适当的上下文。

编辑

澄清一下，我正在寻找一种解决方案来传递适当的上下文。以上只是一个例子，我并不是在寻找一种解决方案来跟踪状态。

例如在 vue-resource 插件中，如果我们发出任何 http 请求。

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

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

上下文已经在回调中了。我不需要执行某种 var _this = this 即可进入 View 范围。我想为我的插件实现相同的目的，以便正确的 this 就在那里。我试图从 vue-resource 插件中找出它，但很难理解所有代码。

Answer 1

将我的评论扩展为答案 -

所以您的 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 绑定(bind)到 post() 即可:

this.$state.post(args){

}.bind(this)

所以在 post 函数中 this 将是你的 Vue.我认为第一种方式最好

编辑--

函数 successCb 和 errorCb 已经在 Vue 组件的范围内运行，因为你在那里定义了它们。 vue-resource 回调在你的情况下具有 State 的范围，因为你在这里定义了它们，除非你像你一样传递上下文，否则不会改变完毕。但这里的重点是你的插件不需要知道组件的上下文，就像 vue-resource 永远不知道组件的上下文一样。它只是获取数据、发送请求并运行回调。对调用组件一无所知。

因此，在您作为回调发送到 this.$state.post 的函数中，您可以使用 this.var 编辑您的 Vue 数据 - 如您所愿能够。在您从您的状态发送到 Vue.http.post 的回调中，您可以编辑 State 对象的属性 - 同样，这是预期的行为。您需要使 name 或 status 变量成为 State 的一部分，然后将其引用为 this.$state.name 从你的 Vue 组件中检查状态。

编辑 2:

您甚至可以有一个变量 $state.response 并传入 myCustomVar，然后跟踪 $state.response.myCustomVar。这样您就可以在每个请求中传递不同的自定义变量并独立跟踪它们