Vuex 调度会产生大量开销

问题描述

最近我注意到调度某个动作的时间比它应该的要长，所以我去添加了一些计时器。

这是操作代码：

// ...
mutations: {
    setPrimary(state,data) {
        state.resources.primary = data
    }
},// ...
actions: {
    async load({ commit }) {
        const start = performance.Now()
        // ...
        const apiResult = await apiclient.get("/")
        const startCommit = performance.Now()
        commit("setPrimary",apiResult)
        console.log(`commit finished in ${performance.Now() - startCommit} ms`)
        console.log(`action finished in ${performance.Now() - start} ms`)
    }
}

以及调度动作的代码：

const start = performance.Now()
await store.dispatch("load")
console.log(`dispatch finished in ${performance.Now() - start} ms`)

现在预期的输出是时间非常接近，但情况恰恰相反：

action finished in 820
dispatch finished in 1365 ms

这让我很困惑，因为调用 dispatch 不应该增加如此巨大的开销。到目前为止，我不知道它可能来自哪里。

编辑：

事实证明这是由 commit 调用引起的。没有这个，延迟就会消失。像这样对提交进行计时表明执行只需要 1 毫秒，这意味着这在某种程度上具有我不知道的副作用。

解决方法

开销来自这样一个事实，即您的操作是一个“异步”函数，这意味着当“解释器”执行它时，它将通过它到“浏览器 API”来处理它的执行，而不是直接在“堆栈”，然后等待其结果，然后将其返回“队列”，“事件循环”将等待堆栈为空并将其与结果一起返回堆栈以继续执行

s s s vue.js