如何解决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”来处理它的执行,而不是直接在“堆栈”,然后等待其结果,然后将其返回“队列”,“事件循环”将等待堆栈为空并将其与结果一起返回堆栈以继续执行
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。