从Vuex操作返回承诺 [英] Returning Promises from Vuex actions

问题描述

我最近开始将事物从jQ迁移到一个结构更强的框架VueJS，我喜欢它！

I recently started migrating things from jQ to a more structured framework being VueJS, and I love it!

从概念上讲，Vuex对于我，但是我有信心我知道现在的全部，并且完全理解了！但是存在一些灰色区域，主要是从实现的角度来看。

Conceptually, Vuex has been a bit of a paradigm shift for me, but I'm confident I know what its all about now, and totally get it! But there exist a few little grey areas, mostly from an implementation standpoint.

我认为这个区域在设计上是不错的，但是不知道它是否与Vuex相矛盾< a href = http://vuex.vuejs.org/en/images/vuex.png rel = noreferrer>单向数据流的循环。

This one I feel is good by design, but don't know if it contradicts the Vuex cycle of uni-directional data flow.

基本上，从动作中返回一个promise（-like）对象是否被认为是一种好习惯？我将它们视为异步包装程序，带有失败状态等，因此看起来很适合返回承诺。相反，变异器只是改变事物，而只是商店/模块中的纯结构。

Basically, is it considered good practice to return a promise(-like) object from an action? I treat these as async wrappers, with states of failure and the like, so seems like a good fit to return a promise. Contrarily mutators just change things, and are the pure structures within a store/module.

推荐答案

Vuex中的动作是异步的。让调用函数（动作的发起者）知道动作已完成的唯一方法是返回一个Promise，稍后再解决。

actions in Vuex are asynchronous. The only way to let the calling function (initiator of action) to know that an action is complete - is by returning a Promise and resolving it later.

这里是一个示例： myAction 返回 Promise ，进行http调用并解析或拒绝 Promise 之后-全部异步

Here is an example: myAction returns a Promise, makes a http call and resolves or rejects the Promise later - all asynchronously

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组件的一些示例代码：

Now, when your Vue component initiates myAction, it will get this Promise object and can know whether it succeeded or not. Here is some sample code for the Vue component:

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")
        })
    }
}

如上所示，对于操作返回 Promise 。否则，动作发起者无法知道正在发生的事情以及什么时候情况稳定到足以在用户界面上显示某些内容。

As you can see above, it is highly beneficial for actions to return a Promise. Otherwise there is no way for the action initiator to know what is happening and when things are stable enough to show something on the user interface.

关于 mutators -正如您正确指出的那样，它们是同步的。它们会更改状态中的内容，通常从 actions 中进行调用。不必将 Promise 与 mutators 混合在一起，作为 actions 处理该部分。

And a last note regarding mutators - as you rightly pointed out, they are synchronous. They change stuff in the state, and are usually called from actions. There is no need to mix Promises with mutators, as the actions handle that part.

编辑：我对单向数据流的Vuex周期的看法：

如果您在组件中访问像 this。$ store.state [ your data key] 这样的数据，则数据流是唯一的-

If you access data like this.$store.state["your data key"] in your components, then the data flow is uni-directional.

动作的承诺只是让组件知道动作已完成。

The promise from action is only to let the component know that action is complete.

该组件可以从上述示例中的promise resolve函数获取数据（非单向，因此不建议使用），也可以直接从 $ store.state [您的数据密钥]

The component may either take data from promise resolve function in the above example (not uni-directional, therefore not recommended), or directly from $store.state["your data key"] which is unidirectional and follows the vuex data lifecycle.

上面的段落假设您的mutator使用 Vue.set（state， your data key， http_data），一旦您的操作完成了http调用。

The above paragraph assumes your mutator uses Vue.set(state, "your data key", http_data), once the http call is completed in your action.

这篇关于从Vuex操作返回承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！