Vuex 2.0 调度与提交 [英] Vuex 2.0 Dispatch versus Commit

问题描述

有人能解释一下你什么时候会使用调度还是提交?

Can someone explain when you would use a dispatch versus a commit?

我知道提交会触发突变，而分派会触发操作.

I understand a commit triggers mutation, and a dispatch triggers an action.

然而，调度不也是一种动作吗?

However, isn't a dispatch also a type of action?

推荐答案

正如你所说的，$dispatch 触发一个动作，而 commit 触发一个突变.以下是如何使用这些概念:

As you rightly said, $dispatch triggers an action, and commit triggers a mutation. Here is how you can use these concepts:

你总是在路由/组件的方法中使用 $dispatch.$dispatch 向您的 vuex 存储发送消息以执行某些操作.该操作可以在当前勾选之后随时进行，这样您的前端性能不受影响.

You always use $dispatch from your methods in routes / components. $dispatch sends a message to your vuex store to do some action. The action may be done anytime after the current tick, so that your frontend performance is not affected.

您永远不会从任何组件/路由中提交.它仅在操作中完成，并且仅在您有一些数据要提交时完成.原因:提交是同步并且可能会冻结您的前端，直到它完成.

You never commit from any of your components / routes. It is done only from within an action, and only when you have some data to commit. Reason: commit is synchronous and may freeze your frontend till it is done.

让我们考虑这种情况:如果您必须从服务器获取一些 json 数据.在这种情况下，您需要异步执行此操作，以便您的用户界面不会无响应/冻结一段时间.因此，您只需 $dispatch 一个动作并期望它稍后完成.您的操作会执行此任务，从服务器加载数据并稍后更新您的状态.

Let's consider this case: If you have to fetch some json data from server. In this case, you need to do this asynchronously so that your user interface is not unresponsive / frozen for a while. So, you simply $dispatch an action and expect it to be done later. Your action takes up this task, loads data from server and updates your state later.

如果您需要知道某个操作何时完成，以便在此之前显示 ajax 微调器，您可以返回一个 Promise，如下所述(例如:加载当前用户):

If you need to know when an action is finished, so that you can display an ajax spinner till then, you may return a Promise as explained below (example: load current user):

以下是您如何定义loadCurrentUser"操作:

Here is how you define the "loadCurrentUser" action:

actions: {
    loadCurrentUser(context) {
        // Return a promise so that calling method may show an AJAX spinner gif till this is done
        return new Promise((resolve, reject) => {
            // Load data from server
            // Note: you cannot commit here, the data is not available yet
            this.$http.get("/api/current-user").then(response => {
                // The data is available now. Finally we can commit something
                context.commit("saveCurrentUser", response.body)  // ref: vue-resource docs
                // Now resolve the promise
                resolve()
            }, response => {
                // error in loading data
                reject()
            })
        })
    },
    // More actions
}

在您的突变处理程序中，您执行所有源自操作的提交.以下是定义saveCurrentUser"提交的方式:

In your mutations handler, you do all the commits originating from actions. Here is how you define the "saveCurrentUser" commit:

mutations: {
    saveCurrentUser(state, data) {
        Vue.set(state, "currentUser", data)
    },
    // More commit-handlers (mutations)
}

在您的组件中，当它created 或mounted 时，您只需调用如下所示的操作:

In your component, when it is created or mounted, you just call the action as shown below:

mounted: function() {
    // This component just got created. Lets fetch some data here using an action
    // TODO: show ajax spinner before dispatching this action
    this.$store.dispatch("loadCurrentUser").then(response => {
        console.log("Got some data, now lets show something in this component")
        // TODO: stop the ajax spinner, loading is done at this point.
    }, error => {
        console.error("Got nothing from server. Prompt user to check internet connection and try again")
    })
}

如上所示返回 Promise 是完全可选的，也是并非所有人都喜欢的设计决策.有关是否返回 Promise 的详细讨论，您可以阅读此答案下的评论:https://stackoverflow.com/a/40167499/654825

Returning a Promise as shown above is entirely optional and also a design decision not preferred by everyone. For a detailed discussion on whether to return a Promise or not, you may read the comments under this answer: https://stackoverflow.com/a/40167499/654825

这篇关于Vuex 2.0 调度与提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！