Vuex：跳过动作并直接从Component提交Mutation

Question

在vue.js app中，使用vuex作为状态管理存储，我只需要在vuex中更改属性的值。为此我可以遵循两种方法：

1. 发送action方法，该方法将进一步提交mutation，最终将改变状态。

2. 第二种方法是直接从组件提交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方法提交单个突变，而没有任何其他逻辑或异步功能。< / p>

我的问题是，在这种情况下，我是否应该直接从组件本身提交变异？什么是最佳做法？由于在这个简单的案例中使用action方法似乎很冗长，并没有特定目的。

我是否有理由始终commit来自某个组件的操作？  毕竟，在{vuex ...mapMutations()有一些理由存在。

Answer 1

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

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

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