Vuex 2.0 Dispatch 与 Commit

Question

有人可以解释一下什么时候使用分派和提交吗？

我理解提交触发突变，调度触发动作。

但是，派遣不也是一种行动吗？

Answer 1

正如您所说，$dispatch 触发一个动作，commit 触发一个突变。以下是如何使用这些概念：

您总是在路由/组件的方法中使用 $dispatch。 $dispatch 向您的 vuex 商店发送消息以执行某些操作。该操作可以在 当前价格变动 之后的任何时间完成，这样您的前端性能就不会受到影响。

您永远不会 commit 从您的任何组件/路线。仅在一个动作中完成，仅当您有一些数据要提交时。原因：提交是同步并且可能会冻结您的前端直到完成。

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

如果你需要知道一个动作何时完成，以便你可以显示一个 ajax 微调器直到那时，你可以 return 一个承诺，如下所述（例如：加载当前用户） :

以下是定义 "loadCurrentUser" 操作的方式：

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" 提交：

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

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

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 完全是可选的，也是一个并非每个人都喜欢的设计决定。关于是否return一个Promise的详细讨论，你可以阅读这个答案下的评论：

Vuex 2.0 Dispatch 与 Commit

Vuex 2.0 Dispatch versus Commit

javascript

vue.js

vuex