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

您将看到我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插件中弄清楚但是很难跟踪所有代码.

Answer 1

我最终解决了这个问题，比我想象的要容易。

它只是一个简单的快捷$http方式包装器，以便vue-router可以像这样进行调用：

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