CSRF атака в angular7

actions в Vuex являются асинхронными. Единственный способ позволить вызывающей функции (инициатору действия) знать, что действие завершено, - это вернуть обещание и разрешить его позже.

Вот пример: myAction возвращает Promise ], делает http-вызов и разрешает или отклоняет Promise позже - все асинхронно

actions: {
    myAction(context, data) {
        return new Promise((resolve, reject) => {
            // Do something here... lets say, a http call using vue-resource
            this.$http("/api/something").then(response => {
                // http success, call the mutator and change something in state
                resolve(response);  // Let the calling function know that http is done. You may send some data back
            }, error => {
                // http failed, let the calling function know that action did not work out
                reject(error);
            })
        })
    }
}

Теперь, когда ваш компонент Vue инициирует myAction, он получит этот объект Promise и может узнать, преуспел или нет. Вот пример кода для компонента Vue:

export default {
    mounted: function() {
        // This component just got created. Lets fetch some data here using an action
        this.$store.dispatch("myAction").then(response => {
            console.log("Got some data, now lets show something in this component")
        }, error => {
            console.error("Got nothing from server. Prompt user to check internet connection and try again")
        })
    }
}

Как вы можете видеть выше, для actions очень полезно возвратить Promise. В противном случае инициатор действия не сможет узнать, что происходит, и когда ситуация достаточно стабильна, чтобы что-то показать в пользовательском интерфейсе.

И последнее примечание к mutators - как вы правильно указали, они синхронны. Они меняют материал в state и обычно вызываются из actions. Нет необходимости смешивать Promises с mutators, поскольку actions обрабатывает эту часть.

Изменить: Мои представления в цикле Vuex однонаправленного потока данных:

Если вы получаете доступ к данным типа this.$store.state["your data key"] в ваших компонентах, то поток данных является однонаправленным.

Обещание от действия только для того, чтобы компонент знал, что действие завершено.

Компонент может либо взять данные из функции разрешения обещаний в приведенном выше примере (не однонаправленный, поэтому не рекомендуется), либо непосредственно из $store.state["your data key"], который является однонаправленным и следует за жизненным циклом данных vuex.

В приведенном выше абзаце предполагается, что ваш мутатор использует Vue.set(state, "your data key", http_data), как только HTTP-запрос завершен в вашем действии.