Как мутировать асинхронно vue store?

Question

[Виктор Майоров]

Мне нужно сделать пред загрузку данных из API, у меня есть async функция с запросом через axios, эта функция импортируется в других файлах и с этими данными происходить манипуляция и после этого я передаю через мутации данные в vue store.

Когда я только все это писал, я хранил данные в localStorage и было все отлично, сейчас я забираю те же данные из API и все посыпалось, так как export default в самом конце где происходит мутации отрабатывает сразу же, не дожидаясь того, что происходит выше.

Есть ли решение?

Answer 1

[Roman K]

Мутации не могут быть асинхронными, они нужны только чтобы устанавливать данные в стор. Всю асинхронную работу делай в actions, затем оттуда вызывай коммиты мутаций

Comments

[Виктор Майоров]

У меня сама проблема в том, что у не проставляется мутации.
Так как код выше срабатывает быстрее, чем приходит ответ от сервера.
И с самого начало, уже не правильно отрабатывает фронт.

[Roman K]

Виктор Майоров, значит нужно учить джаваскрипт, учить промисы, async/await и всё такое. Не бывает такого, чтобы правильный код, который должен ждать какого-то события, срабатывал быстрее, чем то событие, которое он ждёт.

Answer 2

[steelpear]

Надо использовать не мутацию, а action.
export const actions = {
set_text: ({ commit }, payload) => { commit('set_text', payload) }
}