Возвращение обещаний от действий Vuex

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

вот пример: myAction возвращает a 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, он получит этот объект обещания и может знать, удалось ли это или не. Вот пример кода для компонента 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 обрабатывать эту часть.

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

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

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

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

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