Можно ли сделать так, чтобы коммит коммитов отправлял пакетами один за другим в vuex?

Question

На картинке видно, что я делаю много коммитов.Я хочу подождать некоторое время и отправить их все вместе (все значения важны).

Возможно ли это?

Я называю действие так:

this.updateIsOnStudentList({ materialId: this.material.Id, isOnStudentList: this.material.IsOnStudentList });

Мое действие:

async function evaluationMaterial({ commit }, { materialId, evaluationState }) {
    commit('UPDATE_EVALUATION_MATERIAL', { materialId, evaluationState });
}

Моя мутация:

const UPDATE_EVALUATION_MATERIAL = (state, { materialId, evaluationState }) => {
    let interactionState = state.materialInteractionState[materialId];

    if (!interactionState) {
        interactionState = { ...DEFAULT_INTERACTION_STATE };
    }

    interactionState.evaluationState = evaluationState;

    vueInstance.get().$set(state.materialInteractionState, materialId, interactionState);
};

Answer 1

Идея vuex состоит в том, чтобы "отслеживать" все эти коммиты.Если вы хотите иметь более чистую историю коммитов, вам нужно создать специальный коммит, чтобы обернуть все эти изменения в единое целое или сделать так, чтобы ваш компонент не вызывал столько actions/commits путем их буферизации.Если эти изменения происходят из-за разных действий и должны быть применены сразу же, тогда вам не повезло.

Answer 2

Один из моих коллег (https://stackoverflow.com/users/story/10724336) смог реализовать решение очереди отказов ... Вот решение:

Мое действие:

function evaluationMaterial({ commit }, { materialId, evaluationState }) {
    _updateInteractionStateDebounced({ commit, materialId, evaluationState });
}

_updateInteractionStateDebouncefuction:

const _updateInteractionStateDebounced = debounceQueueUtil.debouncedQueue(_updateInteractionState);

Функция debounceQueueUtil:

const debouncedQueue = function(functionToBeCalled, timeout = 300) {
    const self = {};

    self.daleyedArgs = [];
    self.timeout = timeout;
    self.functionToBeCalled = functionToBeCalled;

    return _saveArgs.bind(self);
};

const _saveArgs = function(args) {
    if (this.debounced) {
        clearTimeout(this.debounced);
    }

    this.daleyedArgs.push(args);
    this.debounced = setTimeout(_callDebouncedFunction.bind(this), this.timeout);
};

const _callDebouncedFunction = function() {
    const args = this.daleyedArgs;
    this.daleyedArgs = [];

    this.functionToBeCalled(args);
};

export default {
    debouncedQueue
};

Answer 3

1. Используйте асинхронный action вместо commit.
2. Соберите обещания из ваших операций и дождитесь Promise.all()
3. Затем обновите store как пакеткоммитов.