Vuex：直接从组件跳过动作并提交突变答案

【问题标题】：Vuex: Skipping Action and committing Mutation directly from ComponentVuex：直接从组件跳过动作并提交突变
【发布时间】：2018-10-03 11:51:48
【问题描述】：

在 vue.js 应用程序中，使用 vuex 作为状态管理存储，我需要简单地更改 vuex 中属性的值。为此，我可以采用两种方法：

调度一个action 方法，该方法将进一步提交mutation，最终将改变状态。
第二种方法是直接从组件中提交mutation，然后mutation方法会改变状态。

目前，我正在使用这样的第一种方法：

在组件中：

this.$store.dispatch('updateNotice', 'This is some notice')

在行动中：

updateNotice ({state, getters, commit}, payload) { commit('UPDATE_NOTICE', payload) }

在突变中：

UPDATE_NOTICE (state, payload) { state.notice = payload }

您可能已经注意到，我使用 action 方法只是为了提交 single 突变，没有任何其他逻辑或 async 功能。

我的问题是，在这种情况下，我不应该直接从组件本身提交突变吗？最佳做法是什么？因为在这个简单的例子中使用action 方法看起来很冗长并且没有特定的目的。

有什么理由我应该始终 commit 来自组件的操作？毕竟，在 vuex 中，...mapMutations() 有一些存在的理由。

【问题讨论】：

我直接在组件中使用突变（和需要时的操作），因为使用“仅操作”我添加了一个不需要且必须读取的层。
在这种情况下没有理由不直接使用突变。在official Vuex doc 中有一个名为Committing Mutations in Components 的部分。预计直接在组件中提交突变。
Is it bad to commit mutations without using actions in Vuex?的可能重复
更多细节也可以在这里找到：github.com/vuejs/vuex/issues/587

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

在您的情况下，使用...mapMutations 或$store 实例直接在您的组件中提交突变应该没问题。

既然你问了最佳实践，Actions 存在的主要原因是异步性。 Mutations 不能是异步的，而 Actions 可以是异步的，虽然您可以在组件中直接调用 $store.commit，这将是一个同步事件，但是当您调用 dispatch 时，可以在操作块中异步处理提交，这与 Mutations 不同。

因此，最佳做法是在必须异步处理状态时使用 Actions 提交对状态的修改，例如在提交状态更改之前需要执行 API 调用，在这种情况下使用 Actions 是一个好主意。

【讨论】：