javascript - Vuex:跳过 Action 并直接从 Component 提交 Mutation

Question

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

1. 调度 action 方法，该方法将进一步提交 mutation，最终将更改状态。

2. 第二种方法是直接从组件提交mutation，然后 mutation 方法将更改状态。

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

在组件中:

this.$store.dispatch('updateNotice', '这是一些通知')

在行动中:

updateNotice({state, getters, commit}, payload){
提交('UPDATE_NOTICE'，有效载荷)
}

在突变中:

UPDATE_NOTICE(状态，负载){
state.notice = 有效负载
}

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

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

有什么理由让我总是从组件中提交操作吗？ 毕竟，在 vuex 中，...mapMutations() 有一些存在的理由。

Answer 1

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

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

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