Question

我有一个带Vuex商店的Vue实例。 Vue组件可以调用Vue实例上的方法，以确保Vuex存储中存在某些对象。每个对象都存储为类ApiObject的实例。如果只知道对象的ID，则将使用jQuery Ajax请求从服务器中提取对象。

出现以下问题：

我有两个ApiObjects，它们各自的对象ID为“0d3f7f10”和“f6a7d150”。第一个已经存在于Vuex存储中，但第二个只能通过它的id知道，因此会触发Ajax请求。

id为“f6a7d150”的对象启动ajax请求并命中正确的端点（/ api / v1 / f6a7d150），然后命中回调函数，这是ApiObject类的一种方法。

但是当调用回调时，我突然出现在ApiObject的错误实例中。我希望我正在调用ApiObject“f6a7d150”的回调方法，但我正在使用“0d3f7f10”的回调方法。

这是API调用和回调方法：

refresh () {
    console.log('Calling ' + this.id);
    jQuery.ajax({
        context: this,
        url: this.url(),
        method: 'GET',
        success: this.handleApiResult
    })
}

handleApiResult (result) {
    console.log('Handling ' + this.id);
    this.data = result['data'];
}

预期的控制台输出为：

Calling f6a7d150
Handling f6a7d150

但实际上是：

Calling f6a7d150
Handling 0d3f7f10

handleApiResult中的结果变量保存ID为“f6a7d150”的正确对象，所以直到API调用我们处于正确的实例中。

当我转储Vuex商店时，有两个ID为“0d3f7f10”的对象，一个带有数据，另一个带有数据（我们刚刚从API中提取的那个）没有数据，所以只知道它的ID。

Vue组件在我的Vue实例上使用这些方法在Vuex中创建对象。控制台日志报告，创建了ID为“f6a7d150”和“0d3f7f10”的对象，所以我不知道，我的商店中没有ID为“f6a7d150”的对象。

ensureObject (type, id, data) {
    if (!type || (!id && !data)) {
        return;
    }

    if (!id) {
        id = data.id;
    }

    if (this.$store.state[type].filter(o => o.id === id).length < 1) {
        console.log("Creating " + id);
        this.$store.state[type].push(new CiliatusObject(type, id, data));
    }
},

ensureObjects (type, ids, data) {
    if (!ids && !data) {
        return;
    }

    if (!ids) {
        data.forEach(obj => this.ensureObject(type, null, obj));
    }
    else {
        let that = this;
        ids.forEach(function (id) {
            that.ensureObject(
                type,
                id,
                data ? data.filter(o => o && o.id === id)[0] : undefined
            )
        });
    }
}

任何建议都将不胜感激。

Answer 1

好吧，我把头撞到墙上好几个小时后发现了。

在Vue组件的计算属性中，有这一行：

let obj = this.$store.state.filter(s => s.id = this.id);

请注意您= .....

所需的===

jQuery Ajax回调一个看似调用错误实例的类方法

1 个答案: