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方法只是提交单个突变,没有任何其他逻辑或异步功能.

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

是否有任何理由我应该始终commit从组件中采取行动？毕竟,在vuex中...mapMutations()有一些理由存在.

Answer 1

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

既然你问过最佳实践,那么存在动作的主要原因就是异步性.变异不能是异步的,而动作可以是,虽然你可以$store.commit直接在Component中调用,但这将是一个同步事件,但是当你调用dispatchcommit时,可以在动作块中异步处理,而不像Mutations.

所以最好的做法是使用Actions来提交对状态的修改,当它必须异步处理时说你需要在提交状态更改之前进行API调用,在这种情况下使用Actions是个好主意.