В какой момент, при выполнении Vuex action, задачи на изменение добавляются в очередь тиков?

26 июня 2021, 11:40

При условии наличия множественных commit в теле action-а:

actions: {
    async action({ commit }) {
        commit('commit1');
        await sleep(2000);
        commit('commit2');
        await sleep(2000);
        commit('commit3');
    },
}

Гарантирует ли action, что commit-ы, внутри него, отработают последовательной пачкой и в рамках одного тика? Или же между задачами, инициированными 'commit1' и 'commit2', в очередь может добавиться 'some_other_commit_from_other_action'?

Answer 1

Есть подробное описание документации vuejs. Если почитать на досуге, то многое становится ясно и все последующие вопросы отпадают сами, но даже если нет, вы всегда будете знать где взять информацию.

Итак если вкратце, то все изменения становятся в очередь. Любое изменение DOM осуществляется через очередь тиков. Если какой-то проперти изменился несколько раз, то он заменит предыдущий тик в своей очереди. Поэтому основываясь на документации можно сделать вывод, что все изменения, которые были порождены вызовами commit встанут в очередь и изменятся последовательно.

UPD.

Вы не поняли принцип работы реактивности. Изменение каждой проперти создает в очереди задачу на обновление DOM. Если по окончанию выполнения action были затронуты три разных проперти, то создадутся 3 задачи на обновление, которые отработают последовательно. Vuex - это просто плагин, который выступает в роли глобального сервиса по хранению данных. Он логирует каждое изменение store, одна мутация = одна запись в лог (вместе со всеми state), но никак не изменение трех разных мутаций сразу, т.к. они запустятся последовательно.

UPD2

У вас action с 3 commit внутри (грубо это породит 3 новых тика). Сам action это асинхронная приблуда, а commit синхронная. Мы не знаем что они делают, но предположу, что изменяют разные объекты в store. Отработал commit('commit1') и тут же появилась задача в пуле тиков на обновление DOM. Она может успеть, а может и нет обновить DOM прежде чем запустится следующий commit('commit2'), который также следов встанет в очередь, потому что очередь работает асинхронно и добавление в очередь происходит автоматически. Ваши sleep не изменят ситуацию.

И да между 'commit1' и 'commit2' может оказаться другое изменение, повторяю потому что очередь асинхронна.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблема с import React from 'react';

у меня есть employeejsx которых отображает employee и все окей но как только я добавляю export default Employees для того что бы класс использовать в другом месте,...

javascript