When working with a vue.js app and utilizing vuex as the state management store, one may need to update a property's value in vuex. This can be achieved through two methods:
One can dispatch an
actionmethod, which will then commit amutationto alter the state.The alternative method involves committing the
mutationdirectly from the component, allowing the mutation method to consequently change the state.
At present, the first method is being utilized in this manner:
Within the Component:
this.$store.dispatch('updateNotice', 'This is some notice')In the Actions:
updateNotice ({state, getters, commit}, payload) {
commit('UPDATE_NOTICE', payload)
}In the Mutations:
UPDATE_NOTICE (state, payload) {
state.notice = payload
}It is evident that the action method is being used solely to commit a single mutation, without any additional logic or async functionality.
Given this scenario, the inquiry arises: would it not be more appropriate to directly commit the mutation from the component itself? What constitutes best practice in this context? Using the action method in this straightforward scenario may appear cumbersome and lack a distinct purpose.
Should there always be a rationale behind commit actions from a component? After all, the presence of ...mapMutations() in vuex may provide insights into this aspect.