当传递给 Vuex 动作函数时，数组不再是数组

Question

编辑：在 filterEvents 片段中添加了额外的代码以获得更多上下文。

我不太明白我的代码发生了什么。我正在尝试将一个数组传递到我的 Vuex 商店内的一个动作函数中。如果我 return 在该操作函数中有一个 Promise，那么传递的参数不是 Array 类型而是一个 Object，这会导致我对 Promise 的 reject() 错误。

这里有一些上下文代码：

filterEvents({ commit }, events) {
    console.log(Array.isArray(events)); //this ends up false
    console.log(events);

    return new Promise((resolve, reject) => {
        if (!Array.isArray(events)) {
            reject("Invalid argument: is not of type Array.");
        }

        let filtered = events.filter((event) => {
            let now = new Date();
            let event_stop = new Date(event.stop_time);

            if (event_stop >= now || event_stop == null) {
                return event;
            }
        });

        resolve(filtered);
    });
}

这是我调用 filterEvents 的地方； getEvents;

内部

getEvents({ state, commit, dispatch }, searchParams) {
    .....
    
    eventful.getEvents(searchParams).then(async (res) => {
        .....

        console.log(Array.isArray(res.data.events.event)); //this ends up true
        console.log(res.data.events.event);

        /* where I call it */
        await dispatch("filterEvents", res.data.events.event).then((res) => {
            .....
        });
    }).catch((err) => {
        .....
    });
}

这是 Chrome 开发者控制台的输出。前两个输出来自 getEvents，后两个来自 filterEvents

真的很想解释为什么会这样。我敢打赌它很小，但它是 3 a.m。目前，我的大脑无法理解为什么它在传递给 filterEvents.

时不是 Array 类型

Answer 1

我总是尝试检查数组的长度属性，这在这种情况下可以帮助我。

...
return new Promise((resolve, reject) => {
        if (!Array.isArray(events) && !events.length) {
            reject("Invalid argument: is not of type Array.");
        }

        .....
    });
...

Answer 2

在重新查看控制台上记录的对象后，我终于明白了我的问题所在。如果你想将有效载荷传递给该函数，我不知道 Vuex 操作必须有两个参数。例如，我最初是这样做的

filterEvents(events) {
    .....
}

但我真正需要做的是

filterEvents(context, events) {
    .....
}

context 参数是允许您执行提交和分派等操作的对象。我通常会解构上下文对象（即 { commit, dispatch} ），所以出于某种原因我从来没有想过它。您不必解构上下文对象即可使用提交和分派；如果你不这样做，它就像

context.commit('function', payload);

当传递给 Vuex 动作函数时，数组不再是数组

Array is not array anymore when passed into Vuex action function

javascript

vue.js

vuex