Блог

#vue.js #vuex #s

Вопрос:

 // ...
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
 

Комментарии:

1. Активен ли Vue devtools? Можно ли это воспроизвести в производственном режиме? тело функции опущено для краткости — вот в чем проблема с вопросом. Если вы можете воспроизвести его без этого кода, сделайте это. В противном случае это актуально и не должно быть опущено.

2. @EstusFlask Vue devtools активен, но его можно воспроизвести в производственном режиме. Я не понимаю, почему код имеет значение, так как время происходит прямо за пределами dispatch вызова и прямо там, где начинается и заканчивается действие. Не должно быть такой существенной разницы, независимо от того, какой код выполняется между ними, если только с моей стороны не возникнет огромного недопонимания.

3. Vue devtools должен быть неактивен по умолчанию в prod, не так ли? Попробуйте, чтобы Vue devtools были неактивны, чтобы вы были уверены, что они не вызывают замедления. Это важно, потому что неясно, оправдана ли задержка в 800 мс или имеет место какое-то глобальное замедление. Плагины Vuex могут вызвать задержку, или есть какой-то параллельный процесс, который занимает основной поток, включая визуализатор Vue. Я бы не ожидал, что в этом месте из ниоткуда возникнет 550 миль.

4. Я попробовал это с отключенными devtools, результат был похожим (меньшая задержка, но все равно примерно вдвое больше времени для выполнения dispatch . Чего я не могу понять, так это того, как может быть оправдана любая значительная задержка, поскольку оба таймера должны отсчитывать время выполнения действия. Поэтому, если что-то внутри действия происходит медленно, это также должно отображаться в результатах синхронизации внутри действия. Но, похоже, это не так.

5. Я последовал вашему намеку на то, что это может быть что-то внутри действия, и оказывается, что есть определенный commit вызов, который вызывает эту задержку. Но я рассчитал время этого вызова, и он сообщает о времени выполнения всего 1 мс. Если я удалю этот вызов, не будет измеряться существенная задержка. Я все еще не вижу, как вызов функции, который выполняется за 1 мс, может вызвать задержку в 500 мс.

Ответ №1: